Material UI TreeView 递归渲染是如何工作的？

Question

我正在尝试动态渲染 Material UI TreeView，所以我想在节点扩展事件上添加新节点。我试图这样做，但遇到了一些奇怪的行为。我有一个带有一些节点的 json 数据变量，在节点扩展上，我正在向该变量添加一些新的子节点并将其传递给我的渲染函数，但不幸的是我的树没有改变。如果我提前在另一个变量中添加额外的节点并在节点展开时渲染该变量，树确实会改变，我不明白为什么，因为在将变量传递给渲染函数时，变量具有相同的数据.这是我的例子： https://codesandbox.io/s/thirsty-swanson-ld8nt?file=/src/index.js

Answer 1

React 的第一条规则是不要改变状态。在这里，您的 treeData 状态设置为 data 变量。你通过调用addChildrenToParentByParentId 和setTreeData(data) 来改变data。但是treeData 已经是data。它们是对内存中同一个对象的引用。因此将状态设置为自身不会触发重新渲染。 data 的内容是不同的，因为你改变了它，但 React 不会接受这一点，因为它希望你不要改变状态。

为了正确执行此操作，您需要返回data 的新副本，实际上是extremely annoying 向下四级。