React 组件有时不显示答案

【问题标题】：React component sometimes don't show upReact 组件有时不显示
【发布时间】：2021-11-13 15:30:06
【问题描述】：

我正在学习 React（目前是高阶组件），但我遇到了一个问题。在我的练习中，组件有时显示数据，有时不显示。我的代码由两个组件组成

DisplayList - 显示 props 传递的数据的组件

GetAndDisplayData - 接收 DisplayList 组件、API 的 url 和所需参数（从 API 获取）的高阶组件

代码：

DisplayList.js

class DisplayList extends React.Component{
    render(){

          return(
                <ul>                     
                  {this.props.data.map((input, i) => <li key={i}>{input}</li>)}                   
                </ul>
                );     
    }
}

GetAndDisplayData.js

const GetAndDisplayData = (DisplayList, urlOfData, parameterToGet) =>
class GetAndDisplayDataClass extends React.Component{

    constructor(props){
        super(props);

       this.state = {
           loading: true,
           urlOfData: urlOfData,
           parameterToGet: parameterToGet,
           data: []
       }
    }

    componentDidMount(){
        this.getData(urlOfData, parameterToGet)
    }

getData(urlOfData,parameterToGet){
    
    fetch(urlOfData) 
    .then(data => data.json())
    .then(jsonData => {
       jsonData.map(input =>           
            this.state.data.push(eval("input."+parameterToGet))            
       );      
    })

    this.setState({loading: false})
    console.log(this.state.data)
}  

render(){
   if(this.state.loading){
       return(<p>Data is loading</p>)
   }else{
       return(
           <div>
               <p>Data loaded</p>
               <DisplayList data={this.state.data} />
           </div>
       );
   }
}
}

以及HOC的调用

render(){
        const GetData = GetAndDisplayData(DisplayList, "https://restcountries.eu/rest/v1/all", "name" );
        return(
           
            <div>    
              <GetData/>
            </div>

        );

我想这个问题是关于异步的，因为如果我使用一些简短的数据列表，一切都很好，但是如果我使用这个 API 和列表中 250 个对象的列表，有时数据不会显示（有时做）。我做错了什么？

【问题讨论】：

getData(urlOfData,parameterToGet){ fetch(urlOfData) .then(data => data.json()) .then(jsonData => { jsonData.map(input => this.state.data .push(eval("input."+parameterToGet)) ); //放在这里 this.setState({loading: false}) console.log(this.state.data) }) //不放在这里因为它本质上是异步的}

标签： reactjs high-order-component

【解决方案1】：

正如你已经说过的，数据加载是异步的，所以你必须在回调函数中更新loading状态变量：

componentDidMount(){
  this.loadData(urlOfData, parameterToGet)
}

loadData(urlOfData, parameterToGet){
  fetch(urlOfData) 
  .then(data => data.json())
  .then(jsonData => {
    // I didn't understand how you want to map the data
    const data = jsonData.map(...); 
    console.log(data);
    // you must update the state here
    this.setState({loading: false, data: data});
  });
}

【讨论】：