Question

我正在尝试使用react钩子在物料表中编辑/删除一行。尽管我可以看到状态已被修改，但它不会重新呈现物料表。 setdata之后不会触发useeffect。

this.deleteBookmark = function (resultItem) {
  var i = 0;

  let bookmarks = this.getBookmarks();

  for (;i < bookmarks.length - 1;i++) {
    if (resultItem.id === bookmarks[i].id) {
      break;
    }
  }

 if (i >= 0) {
   bookmarks.splice(i, 1);
   console.log(bookmarks)
   return setBookmarks(bookmarks);
 }
 return false;
}

上面的代码最初呈现良好。但是，当我尝试删除该行时，数据已删除了一行，但是useEffect不会触发，并且MaterialTable组件不会与新数据一起呈现。但是，如果我使用注释掉的代码，则在删除后useEffect会正常运行。我想念什么？

Answer 1

一般而言，您不应更改数据以触发useEffect挂钩或使用props和state进行反应。问题是，您将相同的对象设置为状态钩子，只是被突变了。对象引用是相同的，并且useEffect将假定没有任何更改。像这样写：

new Promise((resolve, reject) => {
                    setTimeout(() => {
                        setData(data.filter(row => row._id !== oldData ._id);
                        resolve();
                    }, 1000);
                })

过滤器将返回一个新数组，但是所选项目将被删除。现在，数据是一个新数组，这将触发useEffect钩子，因为旧对象和新对象的引用不同。

_。remove（data，row => row._id！== 3））还返回一个新的数组，例如filter，它更新了不可变的钩子。这将触发useEffect挂钩并导致重新渲染。希望这可以帮助。编码愉快。

使用挂钩对材质表进行编辑

1 个答案: