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

Posted 2023-02-22

【中文标题】使用 JSON 数据反应更新状态变量

【英文标题】：React update state variable with JSON data

【发布时间】：2021-03-07 00:15:12

【问题描述】：

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

【问题讨论】：

那是因为你在得到响应之前是控制台登录的

【参考方案1】：

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

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