PushJsonの結果がReactJSに配列される正しい方法は何ですか？

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それが理にかなってほしい。

Answer 2

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

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

    load() { 
    const url = 'https://randomuser.me/api/?results=5'; 
    return fetch(url) 
    .then(response => response.json()) 
    .then(({results:nodes}) => this.setState({nodes})) 
    } 

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

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