无法做出反应以呈现最新的属性值

Question

我有一个渲染函数调用另一个函数：

render () {
    return (
      <div>
        { this.renderTableArea() }
      </div>
    );
  }

该函数返回具有属性值的div：

renderTableArea () {
    const {documents} = this.props;

    console.log('documents.length: ', documents.length)
    if (documents.length === 0) {
      return (
        <div>This project has no documents yet alex.</div>
      )
    }
  }

通过redux从服务器加载文档：

function mapStateToProps (state, ownProps) {
  return {
    projectId: ownProps.projectId,
    documents: state.projectsStore.documents
  };
}

export default connect(mapStateToProps, {
  fetchDocuments
})(ProjectDocuments);

在控制台中，documents.length显示4次，前2次为0，最后2次为8。 我希望div表示没有文档最后不呈现，因为document.length最终不为0，但是div却呈现。

我不明白为什么当document.length最终为非零时会渲染该div。

Answer 1

我从您的问题陈述中了解到的是，您想在显示文档时显示“该项目还没有文档”。 length为零，而document.length！== 0时是一些有效的jsx。所以我可以在您的代码中看到，当document.length！== 0时，您最终没有返回任何东西。您可以像这样修改代码

renderTableArea () {
    const {documents} = this.props;

    console.log('documents.length: ', documents.length)
    if (documents.length === 0) {
      return (
        <div>This project has no documents yet alex.</div>
      )
    } else if (documents.length !== 0) {
     return (
     <div>
       //some jsx for your document
       {document}
     </div>
     )
}
  }

Answer 2

另一个因素是将该属性清零。 我不知道 我正在通过将属性复制到变量并将其传递给有问题的组件上的其他属性名称来解决此问题。