Question

我正在尝试从我的一门课程中为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];
}

Answer 1

设置状态不同步，您将无法在finally块中获取更新的内容。

如果要调试内容更改的值，可以使用useEffect并在其中进行控制台，如下所示。

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

Answer 2

尝试一下将通过

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}`);
    function getData() {
      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);
        });
    }

    getData();
  }, [baseURL, content]);

  console.log(content);
  return [content, loading, error];
};
`

在React useEffect挂钩中设置挂钩状态

2 个答案: