React中useEffect内State变量未更新求助：数据获取后状态不生效

我在使用useEffect调用接口获取书籍数据时，能成功打印出res.data，但打印State变量allBooks却得到空数组，页面始终显示加载Spinner。即使改用async/await写法，问题依然存在。

原代码示例 #

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'/>
  )}
);

尝试过的async/await写法 #

async function fetchData() {
  let response = await axios.get(`/all_books`)
  let data = response.data
  setAllBooks(data)
  console.log(allBooks) // 这里依然打印空数组
}
fetchData()

原因分析 #

React的setState是异步操作，调用setAllBooks后，allBooks不会立即更新。你在调用setAllBooks后马上打印allBooks，拿到的还是更新前的旧值——这不是State没更新，而是时机不对。如果组件一直显示Spinner，大概率是res.data的格式或内容不符合预期，而非State未更新。

解决步骤 #

1. 监听State变化确认更新：不要在setAllBooks后直接打印，改用useEffect监听allBooks的变化：

useEffect(() => {
  console.log('allBooks更新后的值:', allBooks);
}, [allBooks]); // 仅当allBooks变化时触发

2. 检查接口返回数据：在setAllBooks前打印res.data的类型和长度，确认是否为非空数组：

axios.get('/all_books').then(res => {
  console.log('接口返回数据:', res.data);
  console.log('数据长度:', res.data.length); // 确认是否大于0
  setAllBooks(res.data);
})

3. 修正async/await写法：在useEffect内定义异步函数并调用，避免潜在问题：

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get('/all_books');
      setAllBooks(response.data);
    } catch (error) {
      console.error('请求失败:', error);
    }
  };
  fetchData();
}, []);

4. 排查数据格式问题：确认接口返回的是直接的数组，而非嵌套在对象中（比如实际数据是res.data.books），这种情况需要调整setAllBooks的参数。

内容的提问来源于stack exchange，提问作者Mus