2023-10-06 useState数据渲染不同步==》async await

业务：点击按钮增加数据并渲染出来。

框架：antd+ts+react。

原来写法：

const [tagData, setTagData] = useState<Array<number>>([]);

点击事件：

  // 添加标签
  const addTag = () => {
    let arr: (number)[] = [];
    arr = tagData;
    arr.push(Math.floor(Math.random() * 10000) + 1);
    setTagData(arr);
  }

问题就是点击添加标签，点第一次能正确把数据渲染出来，点第二次以上，就不能把数据渲染出来了，而是你隐藏了这个页面（比如你最小化网页浏览器）然后再打开它就能把数据显示出来。

解决方案其实很简单，就给它加个async await就行了，直接在点击事件里改：

  // 添加标签
  const addTag = async () => {
    let arr: (number)[] = [];
    arr = tagData;
    arr.push(Math.floor(Math.random() * 10000) + 1);
    await setTagData(arr);
  }

注意：useState是同步的，不是异步的！