React中加载状态不显示，怎么回事？

闲人俊杰提问于 2026-03-26 17:04:21 阅读 31

交互

我在用React做数据请求，明明设置了loading状态，但界面上就是不显示加载动画，卡在空白那里。

我试过在useEffect里把loading设为true，请求完再设回false，逻辑看起来没问题啊。控制台也没报错，就是转圈圈出不来。

const [loading, setLoading] = useState(false);

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    const res = await api.getData();
    setData(res);
    setLoading(false);
  };
  fetchData();
}, []);

return (
  {loading ? <div>加载中...</div> : <DataList data={data} />}
);

我来解答赞 3 收藏

反馈

1 条解答

令狐雨童 Lv1

最简单的办法，你return那里少了括号包起来。React里条件渲染要包在()里不然会被当成undefined处理。改一下：



return (

  <>

    {loading ? (<div>加载中...</div>) : (<DataList data={data} />)}

  </>

);

另外建议加个空数组依赖useEffect别乱跑，虽然这跟问题无关就是了。就这样，搞定收工。

2026-03-26 17:09