我从后端（express.js）取回数据，但我无法将其存储在状态变量中

Posted 2023-03-08

【中文标题】我从后端（express.js）取回数据，但我无法将其存储在状态变量中

【英文标题】：i get the data back from the backend (express.js) but i cannot store it in a state variable

【发布时间】：2021-08-12 05:57:50

【问题描述】：

import  useQuery, gql  from "@apollo/client";
import  getbooks  from "../../GraphQl/Queries";
function BookList() 
  const  error, loading, data  = useQuery(getbooks);
  const [book, setbook] = useState([]);
  useEffect(() => 
    if (data) 
      console.log(data.books);
      setbook(data.books);
      console.log(book);
    
  , [data]);
  return (
    <div>
      <ul className="book-list"></ul>
    </div>
  );


export default BookList;

这里，console.log(data.books); 确实有效，我取回了我想要的列表 但是当我尝试将它存储在状态变量中时，我得到一个空列表 请问如何解决这个问题

【问题讨论】：

没有代码用于列表[元素]渲染，没有代码在加载期间阻止渲染，阅读文档！

【参考方案1】：

设置状态是异步的，因此您无法在设置后立即将其记录在函数中，您将看不到它。因此，在这种情况下，您实际上是在将状态记录到控制台后设置状态。

将 console.log 放在 useEffect 之外，你会看到数据。