React状态提升问题：子组件无法调用父组件传递的setState函数

我瞅了下你的代码，问题主要出在组件传参的细节错误上——属性名大小写不匹配、props解构逻辑混乱，还有传递的student对象层级搞错了，导致EditStudent始终拿不到正确的setStudent函数，一步步给你修正：

1. 修正StudentDetails组件的props接收与传递 #

你在StudentDetails里把整个props对象当成了selectedStudent，而且传递给EditStudent时属性名写错了（小写s的setstudent），这直接导致EditStudent拿不到正确的函数。

修改后的StudentDetails代码：

import React from "react";
import DeleteStudent from "./DeleteStudent"
import EditStudent from "./EditStudent";

// 正确解构props里的student和setStudent
const StudentDetails = ({ student, setStudent })=> {
  return (
    <div id="student-details" >
      <h2>Name: {student.name}</h2>
      <h3>Age: {student.age}</h3>
      <h3>Class: {student.class.name}</h3>
      <h3>Test 1 Score: {student.test1}</h3>
      {/* 传递正确的student对象和大小写一致的setStudent */}
      <EditStudent student={student} setStudent={setStudent}/>
      <DeleteStudent student={student} setStudent={setStudent} />
    </div>
  )
}

export default StudentDetails;

2. 修正EditStudent组件的参数接收与逻辑 #

你之前的EditStudent组件参数定义错误，还引用了未定义的selectedStudent变量，导致setStudent始终获取失败。

修改后的EditStudent代码：

import React, { useEffect, useState } from "react";
import { useMutation } from "@apollo/react-hooks";
import { editStudentMutation, getStudents } from "../queries/index";

// 正确解构props里的student和setStudent
const EditStudent = ({ student, setStudent }) => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  const [test, setTest] = useState("");
  const [editStudent] = useMutation(editStudentMutation);

  // 组件挂载/student变化时，填充表单初始值
  useEffect(() => {
    if (student) {
      setName(student.name);
      setAge(student.age.toString()); // 转字符串适配input的text类型
      setTest(student.test1.toString());
    }
  }, [student]);

  return (
    <form id="edit-student" onSubmit={(e) => {
      e.preventDefault();
      // 构造更新后的student对象
      const updatedStudent = {
        ...student,
        name,
        age: parseInt(age), // 转数字匹配后端类型
        test1: parseInt(test)
      };

      editStudent({
        variables: {
          id: student.id, // 直接用传入的student的id
          name: name,
          age: parseInt(age),
          test1: parseInt(test)
        },
        refetchQueries: [{ query: getStudents}]
      })
      // 更新父组件的selectedStudent状态
      setStudent(updatedStudent);
    }}>
      <div className="field">
        <label>Student Name:</label>
        {/* 把onChange移到input上，绑定更准确 */}
        <input type="text" value={name} onChange={(e) => setName(e.target.value)}/>
      </div>
      <div className="field">
        <label>Age:</label>
        <input type="text" value={age} onChange={(e) => setAge(e.target.value)}/>
      </div>
      <div className="field">
        <label>Test One:</label>
        <input type="text" value={test} onChange={(e) => setTest(e.target.value)}/>
      </div>
      <button type="submit" >submit</button>
    </form>
  )
}

export default EditStudent;

3. 额外优化点 #

• 你在StudentList里定义的filteredStudents数组没用到，可以考虑删除或者替换渲染逻辑；
• 表单提交时记得做类型转换，因为input的value是字符串，而后端可能需要数字类型的age和test1；
• 把onChange事件绑定到input上，而不是外层div，这样触发更准确。

这样修改后，EditStudent就能正确拿到父组件传递的setStudent函数，更新状态后也能触发子组件重新渲染了。

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