ReactJS：如何从Axios返回数据中提取值存入变量

核心问题分析 #

1. 异步时机错误：Axios请求是异步操作，你在调用axios.get后立刻读取this.state.student，此时请求还未完成，state仍为初始空数组，自然拿不到数据。另外setState本身也是异步更新，调用后无法立刻获取新状态。
2. 拼写错误：代码里axio.get应为axios.get，setState({stduent: res.data})里的stduent是拼写错误，正确应为student，这会导致state无法被正确更新。
3. 数组与对象混淆：state里的student是数组类型（初始值[]），不能直接用student.grade，必须针对数组中的单个学生对象操作，或遍历数组提取所有成绩。

正确实现示例 #

方式一：在请求回调内直接处理数据

class Student extends Component {
  state = { student: [] };
  
  componentDidMount() {
    // 修正axios拼写错误
    axios.get(window.$API_URL).then(res => {
      const studentData = res.data;
      // 修正state属性拼写错误
      this.setState({ student: studentData }, () => {
        // setState的回调函数可获取更新后的state
        const { student } = this.state;
        
        // 提取所有学生的成绩到数组
        const allGrades = student.map(item => item.grade);
        // 提取第一个学生的成绩（可选链操作避免数组为空时报错）
        const firstStudentGrade = student[0]?.grade;
        
        // 在这里执行后续处理逻辑
        console.log('所有学生成绩:', allGrades);
        console.log('第一个学生成绩:', firstStudentGrade);
      });

      // 也可以直接在响应数据中处理，无需等待setState
      const allGradesFromResponse = studentData.map(item => item.grade);
      console.log('直接从响应提取的成绩:', allGradesFromResponse);
    }).catch(error => {
      // 处理请求失败的情况
      console.error('数据请求失败:', error);
    });
  }

  render() { 
    const { student } = this.state;
    return (
      <table>
        {student.map(item => (
          <tr key={item.id}>
            <td>{item.grade}</td>
          </tr>
        ))}
      </table>
    );
  }
}

方式二：修复自定义方法并正确调用

如果想保留getGrade方法，先修正它的返回逻辑：

getGrade(studentList) {
  // map会返回新数组，必须将其return出去
  return studentList.map(item => item.grade);
}

然后在请求回调中正确调用：

axios.get(window.$API_URL).then(res => {
  const studentData = res.data;
  this.setState({ student: studentData });
  // 直接用响应数据调用方法，无需等待state更新
  const grades = this.getGrade(studentData);
  // 后续处理grades数组
});

关于getPropertyValue方法的说明

这个方法适用于提取嵌套对象的属性（比如user.profile.age），但你的student是数组，直接传入数组无法正确提取每个对象的grade属性，提取数组元素属性用map更直接。

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