Material UI TreeView 递归渲染是如何工作的？
How does Material UI TreeView recursive render works?
我正在尝试动态渲染 Material UI TreeView，所以我想在节点展开事件中添加新节点。我尝试这样做，但遇到了一些奇怪的行为。我有一个带有一些节点的 json 数据变量，在扩展的节点上我向该变量添加了一些新的子节点并将其传递给我的渲染函数，但不幸的是我的树没有改变。如果我提前在另一个变量中添加额外的节点并在节点扩展上渲染该变量，树确实会改变，我不明白为什么，因为在将这些变量传递给渲染函数时，变量具有相同的数据.这是我的例子：
https://codesandbox.io/s/thirsty-swanson-ld8nt?file=/src/index.js
React 的第一条规则是不要改变状态。此处您的 treeData 状态设置为 data 变量。您通过调用 addChildrenToParentByParentId 然后调用 setTreeData(data) 来改变 data。但是 treeData 已经是 data。它们是对内存中同一对象的引用。因此将状态设置为自身不会触发重新渲染。 data 的 contents 是不同的，因为你改变了它，但 React 不会接受这个，因为它希望你不要改变状态。
为了正确执行此操作，您需要 return data 的新副本，老实说 extremely annoying 向下四层。
我正在尝试动态渲染 Material UI TreeView，所以我想在节点展开事件中添加新节点。我尝试这样做，但遇到了一些奇怪的行为。我有一个带有一些节点的 json 数据变量，在扩展的节点上我向该变量添加了一些新的子节点并将其传递给我的渲染函数，但不幸的是我的树没有改变。如果我提前在另一个变量中添加额外的节点并在节点扩展上渲染该变量，树确实会改变，我不明白为什么，因为在将这些变量传递给渲染函数时，变量具有相同的数据.这是我的例子：
https://codesandbox.io/s/thirsty-swanson-ld8nt?file=/src/index.js
React 的第一条规则是不要改变状态。此处您的 treeData 状态设置为 data 变量。您通过调用 addChildrenToParentByParentId 然后调用 setTreeData(data) 来改变 data。但是 treeData 已经是 data。它们是对内存中同一对象的引用。因此将状态设置为自身不会触发重新渲染。 data 的 contents 是不同的，因为你改变了它，但 React 不会接受这个，因为它希望你不要改变状态。
为了正确执行此操作，您需要 return data 的新副本，老实说 extremely annoying 向下四层。