使用 JSON 数据响应更新状态变量

IT技术 javascript reactjs react-hooks fetch
2021-05-26 03:21:54

应用程序.js:

function App() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const searchDB = () => {
      fetch("http://127.0.0.1:8443/subColumns/5/?key=fc257229-8f91-4920-b71f-885403114b35", {
        mode: 'cors',
        credentials: 'include'
      })
        .then(res => res.json())
        .then((json) => {
          setItems(json);
        })
  console.log({items});
    }
    searchDB();
  }, [])

我需要将 json 响应保持在状态变量中,因为将来不会对 API 请求进行硬编码,并且我希望用户无需刷新即可发出多个 API 请求,并且结果必须映射到不同的组件。目前,尝试将 {items} 打印到控制台会返回一个空数组。

1个回答

由于setItems是异步方法,您无法在 setItems 之后立即获取更新的值。您应该使用另一个useEffect具有依赖性的来查看值。

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