Question

有父组件和子组件（ReactTable）。

父组件的值为state，jsonResult。

每次state.jsonResult更改时，我都要重新渲染<ReactTable />。

尽管jsonResult存在，但始终返回blank Table。

如何动态设置<ReactTable/>数据？

我从<DropZone />组件中获取了“数据”。

class Request extends Component {
    constructor(props) {
        super(props);
        this.state = {sampletext: 'aaaa'};
        this.state = {
            files: [],
            jsonResult: ''
          };

    }

    render()
    {
        const {classes} = this.props;
        //this.setState({sampletext: 'bbbb'});


        return (
            <FusePageSimple
                classes={{
                    root: classes.layoutRoot
                }}
                header={
                    <div className="p-24"><h4>IMK request 시연 페이지</h4></div>
                }
                contentToolbar={
                    <div className="px-24"><h4>호출 시나리오</h4></div>
                }
                content={
                    <div>
                        <div className="p-24">
                            <h2>Token Value</h2>
                            <Input value={'Bearer faa1e3b28de23d0a9811df77c21bf990'}/>
                            {/* <FileUpload /> */}
                        </div>
                        <div className="p-24">
                            <h2>File Upload</h2>

                            <div>
                                <DropZone
                                    getJson={(jsonResult,valueCount) => {
                                    this.setState({ jsonResult, valueCount });
                                }} 
                                >
                                    <p>under 100mb csv file only</p>
                                </DropZone>

                            </div>

                        </div>
                        <div className="p-24">
                            <h2>Get File Text</h2>
                            <div>
                                {/* <TextField 
                                    value={this.state.sampletext}
                                    multiline
                                    rows="20"
                                    className="{classes.textField} w-full"
                                    margin="none"
                                    variant="filled"
                                    />  */}
                                <div> 
                                {/* {this.state.jsonResult ? (
                                    <div>{JSON.stringify(this.state.jsonResult)}</div>
                                ) : null} */}
                                {console.log(this.state.jsonResult)}
                                {(this.state.jsonResult) ? (
                                <ReactTable
                                    data={this.state.jsonResult} 
                                    columns={dataTableColumns}
                                    minRows={0} />) 
                                : 
                                null}
                                </div>
                            </div>
                        </div>
                        <div className="p-24 flex">
                            <div className="flex1">
                                {/* <Button variant="contained" color="primary" className="{classes.button} w-full" onClick={this.handleSearch}>
                                   API call Button
                                </Button>    */}
                                <RequestButton data={this.state.jsonResult} count={this.state.valueCount}/>
                            </div>
                        </div>
                    </div>
                }
            />
        )
    }
}

我在控制台上打印state.data。它做了。但不会打印到ReactTable。

演示：stackblitz.com/github/ohoroyoi/test-dropzone

Answer 1

这个问题是我错过了表列中的访问器。

const dataTableColumns = [
    {
        Header: 'request_id',
        headerClassName: 'table-color-1'
    },
    {
        Header: 'product_name',
        headerClassName: 'table-color-2'
    },
    {
        Header: 'model_name',
        headerClassName: 'table-color-3'
    },
    {
        Header: 'spec',
        headerClassName: 'table-color-4'
    },
    {
        Header: 'manufacturer',
        headerClassName: 'table-color-5'
    },
    {
        Header: 'customer_company_id',
        headerClassName: 'table-color-6'
    },
    {
        Header: 'workplace_id',
        headerClassName: 'table-color-7'
    }

]

没有访问器，因此ReactTable无法将json数组映射到表。

在此之后，它起作用。

const dataTableColumns = [
    {
        Header: 'request_id',
        accessor: 'request_id',
        headerClassName: 'table-color-1'
    },
    {
        Header: 'product_name',
        accessor: 'product_name',
        headerClassName: 'table-color-2'
    },
    {
        Header: 'model_name',
        accessor: 'model_name',
        headerClassName: 'table-color-3'
    },
    {
        Header: 'spec',
        accessor: 'spec',
        headerClassName: 'table-color-4'
    },
    {
        Header: 'manufacturer',
        accessor: 'manufacturer',
        headerClassName: 'table-color-5'
    },
    {
        Header: 'customer_company_id',
        accessor: 'customer_company_id',
        headerClassName: 'table-color-6'
    },
    {
        Header: 'workplace_id',
        accessor: 'workplace_id',
        headerClassName: 'table-color-7'
    }

]

这是一个新手问题，希望它对某人有帮助...

Answer 2

在ReactTable组件中，使用getDerivedStateFromProps（nextProps，prevState）或componentWillReceiveProps从先前状态获取更新的数据。在这里，ReactTable获得了初始的空字符串，而没有获得更新后的值。

在setState之后，想要将数据提供给ReactTable

2 个答案: