本文讨论了在Ant Design的Tree组件中遇到的一个问题：当异步加载子节点后，尝试回滚到初始状态时，组件没有正确地重新渲染。详细描述了初始状态、加载后的状态以及回滚时遇到的问题。代码示例展示了如何更新treeData状态，但未能实现预期的回滚效果。作者寻求解决方案，提供了GitHub上的示例代码供参考。
一个异步加载的tree组件初始状态是这样：
此时的treeData是：
treeData: [
{
title: 'Expand to load', key: '0', children: [
{ title: 'child', key: '0-0', isLeaf: false }
]
}
]
点击+号，模拟异步请求数据，扩展成这样：
此时的状态是：
treeData: [
{
title: 'Expand to load', key: '0', children: [
{ title: 'child', key: '0-0', isLeaf: false ,children:[
{ title: 'Child Node', key: "0-0-0" },
{ title: 'Child Node', key: "0-0-1" }
]}
]
}
]
然后，此时点击按钮，希望返回初始状态：
treeData: [
{
title: 'Expand to load', key: '0', children: [
{ title: 'child', key: '0-0', isLeaf: false }
]
}
]
但是实际结果是：
问题是：
child前面并不是+号(不能点击)，但是状态isLeaf设置的是false
Expand to load展开了，希望的是不展开
感觉是Tree组件并没有重新渲染，而是在原来的基础上update state。求助怎么解决？
主要代码：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
class Demo extends React.Component {
state = {
treeData: [
{
title: 'Expand to load', key: '0', children: [
{ title: 'child', key: '0-0', isLeaf: false }
]
}
],
}
onLoadData = (treeNode) => {
return new Promise((resolve) => {
if (treeNode.props.children) {
resolve();
return;
}
setTimeout(() => {
console.log(treeNode);
treeNode.props.dataRef.children = [
{ title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
{ title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
];
this.setState({
treeData: [...this.state.treeData],
});
resolve();
}, 1000);
});
}
btnClick = () => {
this.setState({
treeData: [
{
title: 'Expand to load', key: '0', children: [
{ title: 'child', key: '0-0', isLeaf: false }
]
}
],
});
}
renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
{this.renderTreeNodes(item.children)}
);
}
return ;
});
}
render() {
return (
{this.renderTreeNodes(this.state.treeData)}
更新treedata
);
}
}
ReactDOM.render(, document.getElementById('root'));
如果需要的话，可以到这边直接下载demo：https://github.com/wyzgo/antd_test.git
扫一扫
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
