Question

在我的启动中，我将一些变量加载到我在Redux的全局存储中，包括填充一个名为＆＃34; outputList＆＃34;

的数组

在我的一个组件中，当我运行它时，即使我在渲染之前尝试对数据进行错误检查，它在加载时仍然会闪烁红色说明：

未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;未定义的

1秒或2秒后收到数据，然后正确加载。显然这是不可接受的。它接收数据的API也是同步的。

在我的组件中，我有以下内容。它表明＆＃34;它有效！＆＃34;只有在浏览器闪烁后才会大喊这个属性长度未定义的消息。

我该如何解决这个问题？谢谢你的帮助

renderContent() {
  if (this.props.outputList.length > 0) {
    return (<span>it worked!</span>);
  }
  else {
    return (<span>did not work</span>);
  }
}

render() {
  return (
    {this.renderContent()}
  );
}

编辑：

在renderContent（）中，我根据请求添加了console.log（this.props.outputList）。我得到2个日志

第一个日志：一个空数组第二个日志：填充数组

抱歉，我不认为你真的需要我发布实际的数组数据吗？

Answer 1

由于在组件生命周期中发生了asyc请求，这对于React dev来说是一个非常常见的问题。

一个非常简单的解决方案是在render（）中定义条件，该条件决定何时呈现实际的内容体：

render(){
  if(!this.props || this.props.data == undefined){
    return null; //You can change here to put a customized loading spinner 
  }

  return(
    <div className="container">{this.props.data}</div>
  );
}

这里this.props.data是从redux asyc函数中获取的。

React在接收数据之前进行渲染，即使我在渲染之前尝试检查它

1 个答案: