用JSON数据反应更新状态变量 [英] React update state variable with JSON data

问题描述

App.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}打印到控制台会返回一个空数组.

I need to keep the json response in a state varibale because in the future, the API request will nt be hard coded and I expect the user will make multiple API requests without refreshing, and the results will have to be mapped to different components. At the moment, trying to print {items} to the console returns an empty array.

推荐答案

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

Since setItems is the asynchronous method, you can't get the updated value immediately after setItems. You should use another useEffect with dependency to see the value.

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

这篇关于用JSON数据反应更新状态变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！