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

Question

我的setState功能无法正常工作，因为它没有呈现组件。设置重现。选择任何区域。示例见下图第一行第二列。查看控制台上的更新行数据。现在我正在尝试使用更新的数据更新视图，但它没有反映。这是我的代码 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

改为数组深拷贝：

从

 this.setState({

              rows: [...rows]

        });

到

   this.setState({

      rows: JSON.parse(JSON.stringify(rows))

    });

在循环中复制项目的更有效方法：

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

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

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

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

              }

              rows[i] = { ...rows[i]};

            }