javascript - react : Implementing a hook to fetch data and return loading state

Question

我正在尝试实现一个钩子(Hook)(useFetch(route, dependency=[]))，它将用于获取数据并返回标量值，loading，用于判断用户当前是否正在获取新数据。

这在初始渲染上按预期工作(因为加载的默认状态为true)。

每次后续渲染都会出现此问题。由于 loading 状态当前设置为 false(在初始渲染之后)，在之前的额外渲染周期内，loading 状态将保持 false它在 useEffect() 顶部更新为 true。

如何防止额外的 loading=false 渲染周期，以便我使用此 useFetch() 的组件立即意识到当前正在获取数据，并且我可以在 render() 中显示 '...loading' 文本(无需渲染两次即可达到这一点)。

useFetch

function useFetch(route, successHandler, dependencies = []) {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setLoading(true);
        fetch(route,
            {
                method: 'POST',
                body: JSON.stringify({}),
                headers: {"Content-Type": "application/json"}
            })
            .then(res => res.json())
            .then(
                () => {
                  // Set state data from component here 
                  successHandler();
                }, 
                () => {/*...*/})
            .finally(() => {
                setLoading(false);
            });
    }, dependencies);
    return loading;
}

组件

function Component(){
  const [toggle, setToggle] = useState(false);
  const [options, setOptions] = useState({});
  const loading = useFetch('endpoint', 
    () => setOptions({foo: 'bar'}), 
    [toggle]);

  return <div>
    <button onClick={()=>{setToggle(!toggle)}}>Trigger useFetch()</button>
    {loading ? '...loading': options.foo}
  </div>;
}

任何帮助或设计建议将不胜感激，

Answer 1

您的代码有两个错误:

const loading = useFetch('endpoint', 
    () => setOptions({foo: 'bar'}), 
    [toggle]);

1. 依赖项数组应该是 useEffect 中使用的变量，在您的情况下它可以是 [route]
2. [toggle] 作为依赖项参数将发送 [false] 或 [true]，具体取决于您的状态变量。它不受您创建的钩子(Hook)的 useEffect 的控制。

看看这个例子，它可能会帮助你更好地理解: