为什么setstate在选择项后的react js中不起作用？

Question

我的setState功能无法正常工作，因为它没有呈现组件。

设置重现。

1. 选择任何区域。示例见下图第一行第二列。

2. 查看控制台上的更新行数据。现在我正在尝试使用更新的数据更新视图，但它没有反映。

这是我的代码 https://codesandbox.io/s/rdg-cell-editing-4cu5p

如果

onUpdate: args => {

            const { startCell, topLeft, bottomRight } = args;

            const { idx: topLeftColumn, rowIdx: topLeftRowIdx } = topLeft;

            const { idx: startColumn, rowIdx: startRowIndex } = startCell;

            const { idx: bottomColumn, rowIdx: bottomRowIndex } = bottomRight;

            const rows = this.state.rows.slice();

            console.log(this.state.rows[startRowIndex][keys[startColumn]]);

            let item = this.state.rows[startRowIndex][keys[startColumn]];

            console.log(topLeftRowIdx, "topLeftRowIdx");

            console.log(bottomRowIndex, "bottomRowIndex");

            console.log(topLeftColumn, "topLeftColumn");

            console.log(bottomColumn, "bottomColumn");

            for (var i = topLeftRowIdx; i <= bottomRowIndex; i++) {

              for (var j = topLeftColumn; j <= bottomColumn; j++) {

                console.log("----");

                rows[i][keys[j]] = item;

              }

            }

            console.log(rows);

            this.setState({

              rows: [...rows]

            });

            //  this.setState({

            //   rows:[

            //     { id: 0, title: "Task 1ssss", complete: "Task 2" },

            //     { id: 1, title: "Task 2", complete: "Task 3" },

            //     { id: 2, title: "Task 3", complete: "Task 4" }

            //   ]

            //  });

            console.log(this.state);

            return rows;

          },

如果我做硬编码setState，这是注释掉的代码，那么它就可以工作

//  this.setState({

            //   rows:[

            //     { id: 0, title: "Task 1ssss", complete: "Task 2" },

            //     { id: 1, title: "Task 2", complete: "Task 3" },

            //     { id: 2, title: "Task 3", complete: "Task 4" }

            //   ]

            //  });

上面的代码在选择区域后工作，当我取消注释代码时它会更新视图

Answer 1

改为数组深拷贝：从&nbsp;this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows: [...rows]&nbsp; &nbsp; &nbsp; &nbsp; });到&nbsp; &nbsp;this.setState({&nbsp; &nbsp; &nbsp; rows: JSON.parse(JSON.stringify(rows))&nbsp; &nbsp; });在循环中复制项目的更有效方法：&nbsp;for (var i = topLeftRowIdx; i <= bottomRowIndex; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var j = topLeftColumn; j <= bottomColumn; j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("----");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows[i][keys[j]] = item;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rows[i] = { ...rows[i]};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }