javascript - 如何用键渲染对象？

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 返回一个带有类似键的对象会怎样

[{名称:test1，数据:datadatadata}，{名称:test2，数据:datatatatatatata}]

如何在自己的跨度或自己的 div 中渲染每个对象？我尝试使用诸如

之类的 map

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

但似乎不起作用。我这样做是因为 React 似乎无法使用键渲染对象，它告诉我使用数组来代替，这就是我尝试过的。

Answer 1

您应该在渲染方法或任何其他方法中执行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>)
  }
}