react 中 如何解决使用useState时，因异步而导致的数据不同步的问题（使用 useRef 来解决）

我遇到的问题：

    在使用antd组件库，渲染树形控件时，删除最后一个树节点时，页面上最后一个树节点依然还在，没有发生变化，但是从后台请求的数据已经为  null 了 

问题展示：

 // 定义变量
 const [treeData, setTreeData] = useState([]);
 ..........
 // 调用删除接口（async  await ）.........
 // 如果后台返回的code 码为10000，代表接口调用成功，会有消息提示。树形控件也会刷新
 if (res.data.code === 10000) {
          message.success(res.data.data);
          form.setFieldsValue({
          .........
          });
          // 重新渲染客户树
          const treeResult = await customerTree();
            dealTreeData(treeResult.data.data.tree);
            // setTreeData 这是异步的
            setTreeData({
              treeData: treeResult.data.data.tree,
            });
        } else {
          message.error(res.data.msg);
        }

解决方法：

1. 先引入 useRef

（useRef 通常大家都是用这个来进行绑定dom操作。但是忽略的这个是可以当做存储容器来用的）

import {  useState, useRef } from 'react';

2. 使用

    // 定义变量
 const [treeData, setTreeData] = useState([]);
    // 处理useState异步操作
  const treeDataTree = useRef(treeData);
  ..........
  // 设置treeData 的 值 为 （通过useRef设定的容器treeDataTree,后面的.current 代表容器的内容）  
   setTreeData({
      treeData: treeDataTree.current,
   });
 // 调用删除接口（async  await ）.........
 // 如果后台返回的code 码为10000，代表接口调用成功，会有消息提示。树形控件也会刷新
   if (res.data.code === 10000) {
          message.success(res.data.data);
          form.setFieldsValue({
            .........
          });
          // 重新渲染客户树
          const treeResult = await customerTree();
          // 通过判断 删除成功以后返回的值是否为空，来给 treeDataTree.current 赋值
          if (treeResult.data.data.tree !== null) {
            dealTreeData(treeResult.data.data.tree);
            setTreeData({
              treeData: treeResult.data.data.tree,
            });
          } else {
          // 如果返回的数据是一个 null ,则将这个值赋给容器
            treeDataTree.current = treeResult.data.data.tree;
          }
          // console.log(treeData.treeData);
        } else {
          message.error(res.data.msg);
        }