React高阶组件拉取API渲染列表偶发数据不显示如何解决？

你的代码存在3个核心问题，共同导致了时好时坏的表现：

• 异步逻辑顺序错误：fetch是异步API，你把this.setState({loading: false})写在了fetch回调外部，会在接口请求还没返回时就提前结束加载状态，此时data还是空数组。数据量大的时候接口响应慢，就会触发这个问题，短列表因为响应快刚好赶在render前把数据push进去才看起来正常。
• 直接修改state：React规定不能直接修改state中的值，你用this.state.data.push()的写法属于直接操作原state，不会触发组件重渲染，只有刚好其他操作触发重渲染的时候才会展示数据。
• 高阶组件在render内创建：你把GetAndDisplayData的调用放在了父组件的render方法里，每次父组件render都会生成一个全新的HOC组件实例，导致原有实例被销毁重新挂载，重复触发接口请求，也会导致展示异常。
• 额外可优化点：不要用eval拼接属性读取逻辑，既不安全也容易出问题，直接用input[parameterToGet]即可。

修复GetAndDisplayData.js #

const GetAndDisplayData = (DisplayList, urlOfData, parameterToGet) =>
class GetAndDisplayDataClass extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            loading: true,
            data: []
        }
    }
    componentDidMount(){
        this.getData()
    }
    getData(){
        fetch(urlOfData) 
        .then(data => data.json())
        .then(jsonData => {
            // 先处理数据，再统一用setState更新触发重渲染
            const formatData = jsonData.map(input => input[parameterToGet])
            this.setState({
                loading: false,
                data: formatData
            })
        })
    }  
    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内创建HOC，提到组件外部：

// 放在父组件类外部，或者类内部的render方法外
const GetData = GetAndDisplayData(DisplayList, "https://restcountries.eu/rest/v1/all", "name" );

// render内直接使用即可
render(){
    return(
        <div>    
          <GetData/>
        </div>
    );  
}

内容的提问来源于stack exchange，提问作者CROnoob