将数据从JSON数组提取到ReactJs

Question

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

Answer 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>});

}

Answer 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'/>

几件事：

1. 您不需要多次调用setState。批量拨打电话。
2. 使this.state至少拼出它期望的数据
3. 如果可以，请使用有意义的密钥。如果你没有更好的结果，你应该只使用数组索引位置。在这种情况下，我使用了stat名称。