weixin_44391741 2022-08-15 18:18 采纳率: 100%
浏览 125
已结题

React中循环setState,如何拿到正确拿到最新的this.state?

问题遇到的现象和发生背景

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能拿到最新的值就可以了

  • 写回答

1条回答 默认 最新

  • Z_ One Dream 2022-08-15 18:23
    关注
    onLoadData= useCallback(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)})
    }, [/* 这里写函数里依赖的所有的 state */])
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月24日
  • 已采纳回答 8月16日
  • 创建了问题 8月15日

悬赏问题

  • ¥15 关于#linux#的问题(输入输出错误):出现这个界面接着我重新装系统,又让修电脑的师傅帮我扫描硬盘(没有问题)用着用着又卡死(相关搜索:固态硬盘)
  • ¥15 cv::resize不同线程时间不同
  • ¥15 web课程,怎么做啊😭没好好听课 根本不知道怎么下手
  • ¥15 做一个关于单片机的比较难的代码,然后搞一个PPT进行解释
  • ¥15 python提取.csv文件中的链接会经常出现爬取失败
  • ¥15 数据结构中的数组地址问题
  • ¥15 maya的mel里,怎样先选择模型A,然后利用mel脚本自动选择有相同名字的模型B呢。
  • ¥15 Python题,根本不会啊
  • ¥15 会会信号与系统和python的来
  • ¥15 关于#python#的问题