react useState 异步 数据获取不到

useState中的 setXXXXX 属于异步函数，在useState第一次存储的时候，会有存储不上的时候

因为react中state的更新是异步的，我们setState后，react并不会立即将值做出改变，而是将其暂时放入pedding队列中。react会合并多个state，然后只render 一次，所以不要在循环里用useState，它有可能只render最后一次set的值, 但当传入一个函数时，这些函数将被放进一个队列，然后按调用顺序执行

• juejin.cn/post/684490…
• 初始代码

• console.log

方法一 : 利用 ref

• 官网中的一段话：如果你刻意地想要从某些异步回调中读取最新的 state，你可以用 一个 ref 来保存它，修改它，并从中读取

const App = () => {
  const [arr, setArr] = useState([0]);
  let ref = useRef();
  useEffect(() => {
    ref.current = arr;
    console.log(arr);
  });

  const handleClick = () => {
    Promise.resolve().then(() => {
      const now = [...ref.current, 1];
      ref.current = now;
      setArr(now);
    })
      .then(() => {
        setArr([...ref.current, 2]);
      });
  }

  return (
      <button onClick={handleClick}>change</button>
  );
}

方法二 ：使用（回调）方式传参

const handleClick = () => {
    Promise.resolve().then(() => {
      setArr(prevState => [...prevState, 1]); // 这里也可以不改，使用 setArr([...arr, 1])
    }).then(() => {
        setArr(prevState => [...prevState, 2]); // 这里必须改成回调函数传参方式，否则会读取旧状态，导致异常
      });
}

方法三 : 处理办法添加一个 副作用（useEffect()）

• 异步获取数据存在的问题, 我这里通过useEffect用存储2次, 没办法 ，解决问题就行了，其他的也不重要

const [categtry, setCategtry] = useState([]);
const [categData, setCategData] = useState([]);
 
useEffect(() => {
    getCollaCategory();
  }, []);
 
useEffect(() => {
// 这个useEffect很关键，第一次赋值但是获取不到，所以要再赋值一次
   if (categtry) {
     setCategData(categtry);
   }
}, [categtry]);
 
const getCollaCategory = async () => {
   const { resp } = await call(service.getCollaCategory);
   if (resp.Code === 0) {
    // 第一次虽然在这里赋值了，但是外部想拿到 categtry这个变量还是空的
      setCategtry(resp.CategoryTree.SubCategoryList);
   }
}

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习