我使用Antd Tree 来呈现数据的树形视图，树的数据一开始是一个平面对象数组，每个对象都有一个键parentId，表示该节点的父节点。
然后我使用函数将此平面数组转换为层次结构，以将其传递给antd 库的Tree 组件
Please refer this Codesandbox link to see the project code
平面数组位于src 文件夹中的data.json 文件中
我这样做是因为粘贴项目的整个代码看起来很笨拙。在选择树中的现有节点作为新节点的父节点后，有一个文本框可以输入新节点名称，没有错误，并且在控制台中的 render 方法中，更新状态也被正确记录，但是树没有被渲染以反映更新的数据，我正在使用 shouldComponentUpdate 方法认为它会更新 DOM 如果有人可以解决问题那么这将是一个很大的帮助
谢谢你
【问题讨论】：
事情是在 handleAddNode 函数中，您从组件的状态更新 flatTree，但基于以下代码：
<Tree
treeData={this.state.hirarchicalTree}
onSelect={this.handleOnSelect}
/>
，treeData 属性来自 hirarchicalTree。
flatTree 是最新的，但 hirarchicalTree 没有，因此您需要从 flat 树更新它。
shouldComponentUpdate 功能对您没有帮助，因此您可以将其删除。
您有两个选项来更新 **hirarchicalTree：
基本上以您在 componentDidMount
中设置的方式从 flatTree 更新 hirarchicalTree在此之后，您将在此块遇到另一个问题：
[...flat].forEach(function(item) {
all[item.id] = item;
});
由于 item 是一个 Object，当您分配它时，all[item.id] 将指向与 flat 中的 item 相同的引用strong> 变量。
因此，当您添加子项时，它们也会添加到 flatTree 中的项目上，从而在页面中呈现重复项。可以看this的回答。
您可以通过以下方式修复它：
[...flat].forEach(function(item) {
all[item.id] = { ...item };
});
这将创建一个浅拷贝，但由于我们在 item 中没有嵌套字段，这很好。
工作代码和框here
【讨论】：