如何通过useState实现表单提交后替换为学生列表的条件渲染？

核心就是用条件渲染，通过一个状态变量控制表单和列表的显示切换，具体步骤如下：

1. 在父组件添加控制显示状态的变量 #

修改StudentListResult.jsx，新增一个状态showList，用来标记是否要显示列表（初始值为false，默认显示表单）：

import React, { useState } from "react";
import StudentForm from "./StudentForm";
import StudentList from "./StudentList";

const StudentListResult = () => {
  const [newStudent, setNewStudent] = useState("");
  const [students, setStudentsList] = useState([]);
  // 新增状态：控制显示表单还是列表
  const [showList, setShowList] = useState(false);

  return (
    <div>
      {/* 条件渲染：未提交时显示表单，提交后显示列表 */}
      {!showList ? (
        <StudentForm
          newStudent={newStudent}
          setNewStudent={setNewStudent}
          students={students}
          setStudentsList={setStudentsList}
          setShowList={setShowList} // 把切换状态的方法传给表单组件
        />
      ) : (
        <StudentList students={students} setStudentsList={setStudentsList} />
      )}
    </div>
  );
};
export default StudentListResult;

2. 修改表单组件，提交后切换显示状态 #

注意你原代码里的组件名是StudentListForm，要和父组件import的StudentForm保持一致，建议文件名和组件名统一为StudentForm.jsx。修改后接收setShowList，在提交成功后调用它切换到列表显示：

import React from "react";
import { v4 as uuidv4 } from "uuid";

const StudentForm = ({
  newStudent,
  setNewStudent,
  students,
  setStudentsList,
  setShowList // 接收父组件传过来的状态切换方法
}) => {
  const addStudent = (event) => {
    event.preventDefault();
    // 校验输入，避免添加空名字
    if (!newStudent.trim()) return;
    setStudentsList([...students, { id: uuidv4(), name: newStudent.trim() }]);
    setNewStudent("");
    // 提交完成后，切换状态显示列表
    setShowList(true);
  };
  return (
    <form onSubmit={addStudent}>
      <div>
        <input
          value={newStudent}
          type="text"
          placeholder="Student Name"
          onChange={(e) => setNewStudent(e.target.value)}
        />
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
  );
};

export default StudentForm;

3. （可选）给列表添加返回表单的功能 #

如果需要允许用户继续添加学生，可以在StudentList.jsx里加一个按钮，调用父组件的setShowList切换回表单：

先修改父组件，把setShowList传给StudentList：

// StudentListResult.jsx里的列表部分
<StudentList 
  students={students} 
  setStudentsList={setStudentsList}
  setShowList={setShowList} // 新增传递
/>

然后修改StudentList.jsx，同时修正原代码中每个学生单独渲染<ul>的HTML结构问题：

import React from "react";

const StudentList = ({ students = [], setShowList }) => {
  return (
    <div>
      <h3>学生列表</h3>
      <ul>
        {students.map((student) => (
          <li key={student.id}>
            <p>{student.name}</p>
          </li>
        ))}
      </ul>
      <button onClick={() => setShowList(false)}>添加新学生</button>
    </div>
  );
};
export default StudentList;

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