React 组件有时不显示

Question

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

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 个对象的列表，有时数据不t出现（有时确实）。我做错了什么？

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

React 组件有时不显示

React component sometimes don't show up

reactjs

high-order-component