javascript - 状态数据更改时 rsuite-table 不更新

Question

这是我的渲染方法

render() {
    return (
        <Contentbox>
            <ol>
                {this.state.data.map((obj) => (
                    <li key={obj._id}>{obj.name}</li>
                ))}
            </ol>
            <Table
                height={420}
                autoHeight
                affixHeader
                data={this.state.data}
                sortColumn={this.state.sortColumn}
                sortType={this.state.sortType}
                onSortColumn={this.handleSortColumn}
                loading={this.state.loading}
                onRowClick={data => {
                    console.log(data);
                }}
            >
                <Column width={70} align="center" fixed sortable>
                    <HeaderCell>Id</HeaderCell>
                    <Cell dataKey="sid" />
                </Column>

                <Column width={200} sortable resizable>
                    <HeaderCell>Name</HeaderCell>
                    <Cell dataKey="name" />
                </Column>

                <Column width={150} sortable resizable>
                    <HeaderCell>(Rs) Value</HeaderCell>
                    <Cell dataKey="value" />
                </Column>

                <Column width={150} sortable>
                    <HeaderCell>Status</HeaderCell>
                    <Cell dataKey="gender" />
                </Column>

                <Column width={80} fixed="right">
                    <HeaderCell>Action</HeaderCell>
                    <ActionCell dataKey={'id'} updateDataTable={this.updateData} />
                </Column>
            </Table>
        </Contentbox>
    );
}

请注意，我将 data prop 设置为this.state.data. 因此，在我在以下函数中更改数据状态后，表值不会更新。

updateData = (rowData, formValue) => {
    let newDataArr = [];
    console.log('do something: ' + rowData._id + " form value: " + formValue.id);
    this.state.data.forEach(function (obj) {
        if (obj._id !== rowData._id) {
            newDataArr.push(obj);
        } else {
            const updatedRow = obj;
            updatedRow.sid = formValue.id
            updatedRow.name = formValue.name
            updatedRow.value = formValue.value
            updatedRow.gender = formValue.gender
            newDataArr.push(updatedRow)
        }
    });
    console.log('new data array ' + JSON.stringify(newDataArr));
    this.setState({
        ...this.state,
        data: newDataArr
    });
}

状态已正确更新，但表未更新。我正在使用 rsuite-table。

Answer 1

const updatedRow = obj;
updatedRow.sid = formValue.id
updatedRow.name = formValue.name
updatedRow.value = formValue.value
updatedRow.gender = formValue.gender
newDataArr.push(updatedRow)

尝试将上面的代码修改为：</p>

newDataArr.push({
  ...obj,
  sid: formValue.id,
  name: formValue.name,
  value: formValue.value,
  gender: formValue.gender
});