时间戳

首页 > 解决方案 > 在 React useEffect 钩子中设置钩子状态

reactjs - 在 React useEffect 钩子中设置钩子状态

问题描述

我正在尝试为我的一门课程的 React 作业创建一个自定义数据获取钩子。是一个简单的钩子，它可以访问几个 REST API 端点并创建一个清单对象，应用程序将其用于沙拉组成组件。问题是我似乎无法从useEffect获取数据的钩子中设置钩子的内部状态。我以前多次使用过这种方法，但我真的不知道是什么导致了这种行为。无论我尝试setContent在我的useEffect函数中使用什么，它总是保持不变null。

请帮忙！

const useInventory = (baseURL) => {
    const [loading, setLoading] = useState(false);
    const [content, setContent] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        setLoading(true);

        const types = ['foundations', 'extras', 'proteins', 'dressings'];
        const urls = types.map(endp => `${baseURL}/${endp}`);

        Promise
            .all(urls.map(u => fetch(u)))
            .then(responses => Promise.all(responses.map(res => res.json())))
            .then(data => {

                const inventory = data.reduce((acc, curr, i) => 
                    ({ ...acc, [types[i]]: curr }),
                {});

                // This logs the inventory in desired format
                // e.g { foundations: Array, extras: Array, ... }
                console.log(inventory);
                setContent(inventory);
            })
            .catch(err => {
                setError(err);
            })
            .finally(() => {
                setLoading(false);

                // This logs null, for some reason
                console.log(content);
            });

    }, [baseURL]);

    return [content, loading, error];
}

标签： reactjsreact-hooksreact-state

解决方案

设置状态不是同步的，您不会在 finally 块中获得更新的内容。

如果要调试内容更改的值，可以使用 useEffect 和控制台，如下所示。

useEffect(() => {
  console.log(content); 
}, [content])

推荐阅读