1

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

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

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

代码：

显示列表.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 个对象的列表，有时数据不会显示（有时会显示）。我究竟做错了什么？

4

1 回答 1

2

正如您已经说过的，数据加载是异步的，因此您必须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});
  });
}
于 2021-09-19T18:07:14.463 回答