Как сделать объект с ключами?

Question

Это пример кода от пользователя с именем FrankerZ:

class ExampleComponent extends React.Component {
    onBlur = async () => {
        const results = await axios.get('myhttpendpoint');

        this.setState({
            results
        });
    }
    render() {
        return (
            <div>
                <form>
                    <span className="name"> Search Term: </span>
                    <input id="search-term" value={this.state.value} onBlur={this.onBlur} />
                </form>
                <div id="results">
                    {this.state.results}
                </div>
            </div>)
    }
}

Но по сути, мой вопрос в том, что если мой axios.get вернул объект с ключами вроде

[{name: test1, data: datadatadata}, {name: test2, data: datatatatatata}]

Как бы я рендерил каждый объект в своем собственном span или div? Я пытался использовать карту, такую ​​как

this.setState(results.map((item, index) => (<li key = {index}>{item.name}</li>)));   

но это не похоже на работу. Я сделал это, потому что кажется, что React не может визуализировать объект с ключами, и он сказал мне использовать вместо этого массив, что я и пытался.

Answer 1

Разметка не должна идти внутрь государства.

Ваш рендер () должен быть таким.

<div id="results">
  <ul>
    {
      this.state.results.map((item, index) => <li key = {index}>{item.name}</li>)
    }
  </ul>
</div>

убедитесь, что вы инициализируете это состояние в конструкторе.

this.state = {
      results : []
    };

Answer 2

Вы должны сделать map в методе рендеринга или любом другом методе и вызовите его в режиме рендеринга, но не в заданном состоянии.

Что-то вроде этого

class ExampleComponent extends React.Component {
  onBlur = async () => {
    const results = await axios.get('myhttpendpoint');

    this.setState({
      results
    });
  }
  render() {
    return (
      <div>
        <form>
          <span className="name"> Search Term: </span>
          <input id="search-term" value={this.state.value} onBlur={this.onBlur} />
        </form>
        <div id="results">
          {this.state.results.map(item => (<li key={item.name}>{item.name}</li>))}
        </div>
      </div>)
  }
}

Answer 3

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    frank: [] // Basically, you will have a place in the state where you will save your data, which is empty.
  }

  componentDidMount(){
    // This lifecycle method is used to fire requests.
    // Fire your request.
    // get the response.
    // save the data only in the state, don't save ELEMENTS such like li.
    const _result = [
      { id: 1, name: 'Frank1' },
      { id: 2, name: 'Frank2' }
    ];
    this.setState({
      frank: _result
    });
  }

  render() {
    const { frank } = this.state;

    return (
      <div>
        <form>
          <span className="name"> Search Term: </span>
          <input id="search-term" value={this.state.value} onBlur={this.onBlur} />
        </form>
        <div id="results">
         {/*HERE DO MAPPING*/}
         {
            frank.map((item, index) => <li key={index}>{item.name}</li>)
          }
        </div>
      </div>)
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Следуйте за комментариями там. живая демонстрация: https://codesandbox.io/s/kxv6myl8wo