javascript - 在 ReactJS 中将 json 结果推送到数组的正确方法是什么？

Question

我想获取 json api 并将结果推送到数组中:

import React from 'react';
import ReactDOM from 'react-dom';

function Users(){

    const url = 'https://randomuser.me/api/?results=5';
    let nodes = [];

    fetch(url)
    .then(response => {
        return response.json();
    })
    .then(j => {
        for( var i = 0; i <= j.results.length; i++ ){
            nodes.push(<li>{j.results[i].name.first}</li>);
        }
    });

    return(
            <ul>{nodes}</ul>
    );

}

ReactDOM.render(
    <Users />,
    document.getElementById('main')
);

但是我在控制台中出现以下错误:

TypeError: j.results[i] is undefined

如何修复此错误？

Answer 1

我不确定这是解决此问题的 react 方法。这是您的问题的解决方案:

class Hello extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      nodes: []
    }
  }

  componentDidMount(){
    this.fetchData();
  }

  fetchData(){
    console.log('here')
    const url = 'https://randomuser.me/api/?results=5';
    fetch(url)
      .then(response => response.json())
      .then(data => {
        const nodes = data.results;
        this.setState({nodes})
      })
  }

  render(){
    return (
      <ul>
        {this.state.nodes.map(node => <li key={node.name.first} >{node.name.first}</li>)}
      </ul>
    )
  }
}

工作示例 here 。希望这是有道理的。