Question

试图弄清楚为什么在获取数据后未设置状态。这是我正在使用的代码...

const [data, setData]: any = useState({ items: [] });

useEffect(() => {
    async function fetchData() {
        const repsonse: any = await fetch('https://hn.algolia.com/api/v1/search?query=react');
        const result: any = await repsonse.json();
        //console.log(result);
        setData(result.hits);
    }
    fetchData();
}, []);

console.log(data);

在上面的示例中，我对useState（）使用了钩子。然后，我使用useEffect进行获取请求。我使用setData函数设置从请求中获得的状态。

但是当我console.log数据时，我得到一个空数组。有人知道为什么会这样吗？可能是我所缺少的简单事物。

Answer 1

useEffect在渲染发生后运行，并且由于您最初的状态为空，因此useEffect之外的console.log将向您显示空数据本身。但是，一旦提取数据，您将在第二个渲染中看到更新的数据。另外，您需要将setState设置为项目，而不是直接传递获得的列表

const { useState, useEffect } = React;
const App = () => {
  const [data, setData] = useState({ items: [] });

  useEffect(() => {
      async function fetchData() {
          const repsonse= await fetch('https://hn.algolia.com/api/v1/search?query=react');
          const result = await repsonse.json();
          //console.log(result);
          setData({items: result.hits});
      }
      fetchData();
  }, []);

  console.log(data);
     return <pre>{JSON.stringify(data.items null, 4)}</pre>

}

Working demo

useState不从获取请求中返回数据

1 个答案: