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

标签 javascript reactjs react-hooks fetch-api

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

最佳答案

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

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

关于javascript - 使用 JSON 数据响应更新状态变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64982687/

相关文章:

javascript - 如何将参数传递给 promise ?

javascript - Angular 应用程序应保持登录状态,直到应用程序在浏览器中打开

javascript - 在 React 中绑定(bind)到 this 的性能最高?

javascript - 类型 '{}' 不可分配给类型 '() =>

reactjs - react 钩子(Hook) : useEffect() is called twice even if an empty array is used as an argument

javascript - 在 Angular 应用程序中使用 Webworkers(服务 worker 在 angular-cli 中缓存数据访问)

Javascript slider 不接受 HTML

javascript - react 导航 : How to go back to root Tab Navigator with specific tab from child stack

css - reactjs 创建表格的一部分可滚动

javascript - ReactJs 在按钮单击时更改文本问题