reactjs 状态变量不会在useEffect内部更改

mnemlml8 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(153)

在下面的useEffect中，成功获取并记录数据：

const [allBooks, setAllBooks] = useState([]);
  
  useEffect(() => {
  axios.get('/all_books').then(res => {
  setAllBooks(res.data);
  console.log(res.data)
  //console.log(allBooks)
   
  }).catch(error => {
  console.log(error);
  });
  
  }, []);
//...
return(
{allBooks.length > 0 ? (
  <div className="books__directory">
  <ul>
  {allBooks.map(book => (
  <li key={book.id}>
  <h3>{book.title}</h3>
  <h3>{book.language}</h3>
  <h3>{book.category}</h3>
  </li>
  ))}
  </ul>
  </div>
  ) : (
  <Spinner animation='border'/>
  )});

但是，当我尝试以下日志时：console.log(allBooks)，它记录一个空对象。这意味着状态变量没有更新。jsx组件总是显示微调器。我尝试了这里建议的方法React Native: useState inside of useEffect does not update the state variable，但问题仍然存在。这是我在useEffect中使用的另一种方法：

async function fetchData() {
    let response = await axios.get(`/all_books`)
    let data = response.data
    setAllBooks(data)
    console.log(allBooks)
  }
  fetchData()

任何帮助都很感激。

reactjs

来源：https://stackoverflow.com/questions/76049606/state-variable-does-not-change-inside-useeffect

2条答案

按热度按时间

lyfkaqu11#

当我尝试console.log一个临时数组时，我可以在控制台上看到值。我只是在useEffect钩子之外，就在返回之前写入console.log。在这里，您可能会发现demo in this link.
另一种解决方案可能是使用async函数来获取数据。但是无论你做什么，状态设置器函数都是同步函数，你不能等待它们，你不能编写依赖于等待状态设置器的逻辑。
下面是useEffect的异步逻辑：

const [allBooks, setAllBooks] = useState([]);

useEffect(() => {
  const getData = async() => {
    await axios.get('/all_books').then(res => {
    setAllBooks(res.data);
    }).catch(error => {
   console.log(error);
    });
 }
 getData();

 }, []);

console.log(allBooks)

赞(0）回复(0）举报 2023-04-20

vi4fp9gy2#

setAllBooks本身是异步的，并且会随时更新allBooks。只需添加一些逻辑，以便仅在allBooks不为空时才执行操作。
就像你可以有这样的效果：

useEffect(() => {
  if (allBooks.length) {
    console.log(allBooks);
  }
}, [allBooks]);

或者，如果您只是将console.log放在当前useEffect之外，您应该会看到它会运行多次，并最终打印出数据。

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 状态变量不会在useEffect内部更改

2条答案

相关问题

热门标签

最新问答