如何在StudentCreate组件提交后无刷新重新挂载ListStudent组件并更新数据？

因为两个组件都是Home.js的子组件，要实现提交表单后列表无需刷新页面就重新获取数据，最直接的方式是把数据刷新逻辑提升到父组件，通过父组件传递回调函数和状态来同步两个子组件的行为。

步骤1：在Home.js中管理数据状态和刷新函数 #

在父组件Home.js里定义学生列表状态，以及获取数据的函数，然后把这些传递给对应的子组件：

import { useState, useEffect } from 'react';
import StudentCreateComponent from './StudentCreateComponent';
import ListStudentComponent from './ListStudentComponent';
import axios from 'axios';

function Home() {
  const [students, setStudents] = useState([]);

  // 定义获取学生数据的函数
  const fetchStudents = () => {
    axios.get("http://localhost:8000/api/")
      .then((response) => setStudents(response.data));
  };

  // 组件挂载时先获取一次数据
  useEffect(() => {
    fetchStudents();
  }, []);

  return (
    <div>
      <StudentCreateComponent fetchStudents={fetchStudents} />
      <ListStudentComponent students={students} />
    </div>
  );
}

export default Home;

步骤2：修改StudentCreateComponent的提交函数 #

在提交表单并成功发送POST请求后，调用父组件传来的fetchStudents函数，触发列表数据刷新：

const handleSubmit = (e) => {
  e.preventDefault();
  axios
    .post("http://localhost:8000/api/", data)
    .then((response) => {
      console.log(response.data);
      // 调用父组件的刷新函数，触发列表重新获取数据
      props.fetchStudents();
    })
    .catch((error) => {
      console.error("提交失败：", error);
    });
};

步骤3：调整ListStudentComponent使用父组件传递的状态 #

现在可以直接使用父组件传来的students状态渲染，不需要自己在组件内发起请求，逻辑更简洁：

// ListStudentComponent.jsx
function ListStudentComponent({ students }) {
  return (
    <div>
      {students.map(student => (
        // 根据实际数据结构渲染学生内容
        <div key={student.id}>
          <p>姓名：{student.name}</p>
          <p>学号：{student.studentId}</p>
        </div>
      ))}
    </div>
  );
}

export default ListStudentComponent;

如果坚持要在ListStudentComponent内部发起请求，也可以让父组件传递一个refreshKey，每次提交后父组件更新这个key，触发子组件的useEffect重新执行：

// Home.js中添加refreshKey状态
const [refreshKey, setRefreshKey] = useState(0);

// 修改刷新逻辑为更新key
const handleRefresh = () => {
  setRefreshKey(prev => prev + 1);
};

// 传递给两个子组件
<StudentCreateComponent handleRefresh={handleRefresh} />
<ListStudentComponent refreshKey={refreshKey} />

// ListStudentComponent.jsx内部
useEffect(() => {
  axios.get("http://localhost:8000/api/")
    .then((response) => setStudents(response.data));
}, [refreshKey]); // 依赖refreshKey，key变化时重新请求数据

两种方式都能实现提交后列表自动刷新的效果，推荐第一种状态提升的方式，逻辑更清晰易维护。

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