问题遇到的现象和发生背景
React 我尝试使用foreach去循环调用接口并更新state,但是第二次及以后的循环拿到的state并不是新的值,导致了只有最后一次循环setState生效了
更详细的背景:
这是一个树,进入页面时会默认拿到父节点,然后点击父节点时异步加载子节点。现在需要默认展开其中的几个父节点。
问题相关代码,请勿粘贴截图
constructor(props: any) {
super(props);
this.state={
TreeData: []
treeDefaultExpandedKeys: []
}
}
//接口获取TreeData的父节点并setState,这里省略
async getDefaultExpandedKeysData(){
const treeDefaultExpandedKeys = api xxxx //接口获取默认展开的节点
treeDefaultExpandedKeys.forEach((item:any) => {
this.onLoadData(item)//循环调用异步加载方法
});
}
onLoadData= async(e: any)=>{
const {TreeData}= this.state
console.log(TreeData)
const copyTreeData= JSON.parse(JSON.stringify(TreeData))
const res = api //获取数据
//一些操作处理数据
this.setState({TreeData: copyTreeData},()=>{console.log(this.state.TreeData)})
}
运行结果及报错内容
console.log(TreeData)总是打印原来的树
console.log(this.state.TreeData) 能够成功打印当前更新的节点,但是没办法保存之前更新的值
我的解答思路和尝试过的方法
尝试过
//把this.setState({TreeData: copyTreeData})改成
this.setState((preState:any)=>({
...preState,TreeData: copyTreeData
}))
//或
setTimeout(() => {
this.setState({TreeData: copyTreeData})
})
//把treeDefaultExpandedKeys.forEach改成
for(var item in this.state.treeDefaultExpandedKeys){
this.onLoadData(this.state.treeDefaultExpandedKeys[item])
}
//都不行
我想要达到的结果
就是const {TreeData}= this.state能拿到最新的值就可以了