如何使用键渲染对象？答案

【问题标题】：How to render an object with keys?如何使用键渲染对象？
【发布时间】：2018-12-10 06:11:07
【问题描述】：

这是来自名为 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，数据：datatatatatata}]

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

之类的地图

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

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

【问题讨论】：

你的状态只是数据。如何将标记逻辑放入状态中？首先阅读 React 文档。
哦，我可以把逻辑放到另一个 const temp 中，然后执行 this.setState({temp})

标签： javascript reactjs onblur

【解决方案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>)
  }
}

【讨论】：

【解决方案2】：

标记不应进入状态。

你的 render() 应该是这样的。

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

确保在构造函数中像这样初始化状态。

this.state = {
      results : []
    };

【讨论】：

【解决方案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);

跟随那里的cmets。现场演示：https://codesandbox.io/s/kxv6myl8wo

【讨论】：