React.js获取API数据时State显示undefined的解决方法咨询

问题根源 #

1. React状态更新的异步性：setUsers是异步操作，调用后不会立刻更新users状态，此时打印的还是初始的undefined。
2. 初始状态未赋值：useState()没有传入初始值，users默认就是undefined。
3. axios数据获取错误：你直接把axios返回的整个响应对象res赋值给了data，实际后端返回的数据在res.data里。

修复步骤 #

1. 初始化状态默认值 #

给users设置初始空数组，避免初始状态为undefined：

const [users, setUsers] = useState([]);

2. 正确获取API返回数据 #

从axios响应的data属性中提取实际数据：

const data = res.data;

3. 正确打印更新后的状态 #

因为setUsers异步，不能在调用后立刻打印users，可以用两种方式：

• 方式一：监听状态变化打印
  添加一个专门监听users变化的useEffect，状态更新时自动打印：

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

• 方式二：直接打印刚获取的data
  如果你需要在请求完成后立刻查看数据，直接打印data即可，它就是要存入状态的最新值：

  setUsers(data);
  console.log(data);
  

完整修复后的代码 #

import React, { useEffect, useState } from "react";
import axios from "axios";

function Student() {
  // 初始化空数组作为默认状态
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function getStu() {
      const res = await axios.get("http://localhost:5000/books");
      // 提取实际返回的数据
      const data = res.data;
      setUsers(data);
      // 直接打印获取到的数据
      console.log(data);
    }
    getStu();
  }, []);

  // 监听users状态变化，更新时打印
  useEffect(() => {
    console.log("更新后的users状态：", users);
  }, [users]);

  return (
    // 你的组件渲染内容
    <div>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

export default Student;

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