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', 

    () => setOptions({foo: 'bar'}), 

    [toggle]);

依赖数组应该是在 中使用的变量useEffect，在你的情况下它可以是[route]

[toggle]作为依赖参数将发送[false]或[true]，具体取决于您的状态变量。这将不受您创建的钩子的 useEffect 的控制。

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