Question

我在ReactTable中有一个SubComponent。如果用户选择其他批次列表项，则子组件应显示相关明细数据。由于某种原因，当前需要单击2才能显示ReactTable行的SubComponent。正如您在下面的代码中看到的那样，我试图创建一个loadingDetail状态值，当getDetail（）检索数据时为true，而在getDetail（）完成数据检索后为false。

似乎ReactTable应该使用ReactTable加载属性为我提供一种更内置的方法，如下面的代码所示，但是我是React的新手，不确定如何利用此属性。当我尝试在下面的代码中实现SubComponent时，Chrome CDT中显示以下错误：

“警告：在现有状态转换过程中（例如，在render之内无法更新。渲染方法应仅是props和state的函数。”

      SubComponent={(row) => {
        const { detail } = this.state;
        const batchDetail = detail;

        if(batchDetail.BatchId != row.row.BatchId){
          this.setState({ loadingDetail : true });
          this.getDetail([row.row.BatchId]);
          this.setState({ loadingDetail : false });
        }            
        return (
          <div>
    <div className={this.state.loadingDetail ? 'show' : 'hide'}>Loading...</div>
            <ReactTable
            data={batchDetail.errors}
            columns={[
                { Header: 'Error Message', accessor: 'ErrorMessage' },
              ]}
            className="-striped -highlight"
            showPagination={false}
            minRows={0}
            loading={this.state.loadingDetail}
            />
          </div>
        );
      }}

在ReactTable子组件中显示加载div的正确方法是什么？

0 个答案: