reactjs 如何强制useState立即更新状态？

anauzrmj 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(395)

行为：加载完成后，即使有数据，空结果也会出现一瞬间。
预期行为：加载后应显示内容，不应出现空结果。
我可以强制setData比setLoading更快地更新状态吗？或者有什么方法可以解决这个问题吗？

export const SomePage = () => {
  const [Data, setData] = useState<Data>();
  const [Loading, setLoading] = useState<boolean>(false);

  const getData = useCallback(async () => {
     setLoading(true);
     try{

       //getting data...

       const dataRes = await sendGetDataRes(something);
       setData(dataRes);

     } catch(err){

       //catching error...

     } finally{

       setLoading(false);

     }
  }

  useEffect(() => {
    getData();
  },[getData]);

  if(Loading){
    return <div>Loading...</div>
  }
  if(!Data){
    return <div>Empty Result!</div>
  }

  return{
    <div>some content...</div>
  }
}

reactjs

来源：https://stackoverflow.com/questions/75763620/how-to-force-usestate-to-update-state-immediately

1条答案

按热度按时间

wswtfjt71#

首先，应将Loader设置为初始值true。
下面是一个工作示例：

export const SomePage = () => {
  const [Data, setData] = useState<Data>();
  const [Loading, setLoading] = useState<boolean>(true);

  const getData = useCallback(async () => {
    try {
      const dataRes = await sendGetDataRes(something);
      setData(dataRes);
    } catch (err) {
      //catching error...
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    getData();
  }, []);

  if (Loading) {
    return <div>Loading...</div>;
  }

  if (!Data) {
    return <div>Empty Result!</div>;
  }

  return <div>some content...</div>;
};

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 如何强制useState立即更新状态？

1条答案

相关问题

热门标签

最新问答