React axios 中“setLoading”状态的好处不明

enter image description here

嘿,谁能告诉我状态加载是做什么的?我们的目标是使用 axios 中的“setLoading(true)”来实现什么?谢谢!

stack overflow Unclear benefit of "setLoading" state in React axios
原文答案
author avatar

接受的答案

加载状态通常用于在获取数据时有条件地呈现加载指示符或类似内容。您还可以有条件地隐藏尚未填充的空状态。

此外,通常您会在发出异步请求之前立即切换 isLoading 状态 true ,当获取完成并且您已将状态更新排入队列时,将其设置回 false

const [data, setData] = useState([]); // no data yet
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
  setIsLoading(true);
  axios.get("......")
    .then(data => {
      setData(data); // update state with response
    })
    .catch(error => {
      // handle any errors/rejected Promises
    })
    .finally(() => setIsLoading(false)); // complete loading success/fail
}, []);

if (isLoading) return <Spinner />;

return data.map(.......);

答案: