将数据从JSON数组提取到ReactJs

时间:2018-04-13 20:53:22

标签: javascript arrays json reactjs

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

2 个答案:

答案 0 :(得分:0)

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

}

答案 1 :(得分:0)

我看了一下你正在尝试做的事情,我认为这是你正在尝试做的事情,或多或少:

&#13;
&#13;
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'))
&#13;
<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'/>
&#13;
&#13;
&#13;

一些事情:

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