javascript - 为什么我的 react 表没有更新数据？

Question

我有一个想要删除或修改数据的 react 表。我的所有单元格的代码都在下面。

    deleteTableElement = (row) => {
        let data = this.state.list.data;
        data.splice(row.id, 1);
        this.setState({
            list:{
                ...this.state.list,
                data:data
            }
        })
    };

    actionsCell = (columns) => {
        columns.push({
            Header: "Accion",
            Cell: (props) => {
                console.log(props);
                return (
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-around",
                        }}
                    >
                        <i
                            onClick={() => this.deleteTableElement(props.row)}
                            className="material-icons"
                            style={{ color: "red", cursor: "pointer" }}
                        >
                            delete
                        </i>
                    </div>
                );
            },
        });
        return columns;
    };

在这种情况下，我想修改项目。 react 表没有更新。

Answer 1

每当您的组件意外没有更新时，那是因为您正在改变状态。从字面上看，100% 的时间:

        let data = this.state.list.data;
        data.splice(row.id, 1); // <- splice mutates an array, mutating state is bad
        this.setState({
            list:{
                ...this.state.list,
                data:data
            }
        })

应该是:

        this.setState({
            list:{
                ...this.state.list,
                data:data.filter((d,i) => i !== row.id)
            }
        })