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说没有文档最终没有被渲染，因为documents.length最后不是0，但是渲染了div。

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

Answer 1

我从您的问题陈述中理解的是，您希望在文档时显示“此项目没有文档尚未文档”。 document.length！== 0时长度为零，一些有效的jsx。所以我在你的代码中看到你在document.length！== 0时没有返回任何东西。你可以像这样修改你的代码< / p>

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

另一个组件是归零该属性。我不知道怎么回事。我正在通过将属性复制到变量并将其传递给有问题的组件上的不同属性名称来解决它。

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

2 个答案: