从 JSON 数组中提取数据到 ReactJs答案

【问题标题】：Extract data from JSON array to ReactJs从 JSON 数组中提取数据到 ReactJs
【发布时间】：2018-04-13 20:53:21
【问题描述】：

我正在尝试使用 Reactjs 从 JSON 数组中提取数据。到目前为止，我已经成功提取了不在数组中的对象。但是如何从数组中提取项目？

【问题讨论】：

你试过{this.state.data.stats.map((stat, i) => { return <div key={i}> {stat.base_stat} </div>

【解决方案1】：

{this.state.data.stats.map(function (stat, i) {
 return key={'stat-'+i}>{stat.base_stat}

这是错误的语法...试试这个：

{this.state.data.stats.map(function (stat, i) {
 return <div key={'stat-'+i}>{stat.base_stat}</div>});

}

【讨论】：

【解决方案2】：

我查看了您正在尝试做的事情，我认为这或多或少是您想要做的事情：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: '',
      height: '',
      weight: '',
      stats: [],
    }
  }

  getData() {
    return fetch('https://pokeapi.co/api/v2/pokemon/1.json')
      .then((response) => response.json())
      .then((responseJson) => {
        const { name, height, weight, stats } = responseJson;
        this.setState({ name, height, weight, stats });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentDidMount() {
    this.getData();
  }

  renderStats() {
    return this.state.stats.map(s =>
      <div key={s.stat.name}>
        {s.stat.name}: {s.base_stat}
      </div>)
  }

  render() {
    return (

      <div className="Info">
        <div id="title" className="title">{this.state.name}</div>
        <div id="parameters" className="parameters">
          <tr><td>Height:</td>&nbsp;<td className="data">{this.state.height}</td></tr>
          <tr><td>Weight:</td>&nbsp;<td className="data">{this.state.weight}</td></tr>
          <br />
          <div>Stats:</div>
          <br />
        </div>
        <div id="stats" className="stats">
          {this.renderStats()}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />,
  document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'/>

几件事：

您无需多次致电setState。批量调用。
让 this.state 至少拼出它期望的数据
尽可能使用有意义的键。如果您没有更好的办法，您应该只使用数组索引位置。在这种情况下，我使用了统计名称。

【讨论】：