React：实现一个钩子来获取数据并返回加载状态

Question

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

这在初始渲染时按预期工作（因为默认状态为loadingtrue）。

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

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

使用获取

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',&nbsp;&nbsp; &nbsp; () => setOptions({foo: 'bar'}),&nbsp;&nbsp; &nbsp; [toggle]);依赖数组应该是在 中使用的变量useEffect，在你的情况下它可以是[route][toggle]作为依赖参数将发送[false]或[true]，具体取决于您的状态变量。这将不受您创建的钩子的 useEffect 的控制。看看这个例子，它可能会帮助你更好地理解：