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

Question

在我的启动中,我将一些变量加载到我在Redux的全局存储中,包括填充一个名为"outputList"的数组

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

未捕获的TypeError:无法读取未定义的属性"长度"

一旦它在1或2秒后收到数据,它就会正确加载.显然这是不可接受的.它从中接收数据的API也是同步的.

在我的组件中,我有以下内容.它显示"它有效!" 只有在浏览器闪烁后才会出错,大喊大叫该属性长度未定义的消息.

我怎样才能解决这个问题？感谢您的任何帮助

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函数中获取的.