如何通过API填充select下拉选项并修复默认值、setAssignedStudent未生效问题

核心问题梳理 #

• 异步时序问题：拉取学生数据的useEffect是异步执行的，初始化assignedStudent时students还是空数组，初始值为undefined，导致select无法设置默认值
• 字段不匹配：option的value绑定的是student.id，但查找学生时匹配的是student._id，二者不一致导致找不到对应学生，setAssignedStudent赋值结果为undefined
• select值绑定错误：select的value属性绑定了整个assignedStudent对象，和option的id类型value不匹配，无法正常回显选中项
• setState异步特性：setAssignedStudent是异步更新方法，调用后立刻打印assignedStudent获取的是更新前的旧值，不是最新状态

修复后完整代码 #

// 初始化学生数组为空
const [students, setStudents] = useState([]);
// 初始赋值为null，等数据加载后再设置默认值
const [assignedStudent, setAssignedStudent] = useState(null);

useEffect(() => {
  const getStudents = async () => {
    try {
      const res = await fetch("http://localhost:3001/students");
      const data = await res.json();
      // 过滤没有导师的学生
      const filter = data.filter((e) => e.mentor === "");
      if (filter.length > 0) {
        setStudents(filter);
        // 数据加载完成后设置默认选中项，选第1个写filter[0]，选第2个写filter[1]
        setAssignedStudent(filter[0]);
      }
    } catch (err) {
      console.log(err);
    }
  };
  getStudents();
}, []);

const handleChange = (e) => {
  const selected = students.find((student) => student._id == e.target.value);
  setAssignedStudent(selected);
  // 要查看最新值直接打印查找到的结果，不要直接打印assignedStudent
  console.log(selected);
};

const handleSubmit = async (e) => {
  e.preventDefault();
  console.log(assignedStudent);
};

// 组件渲染部分
return (
  <form onSubmit={handleSubmit}>
    {/* select的value绑定学生的_id，和option的value对应 */}
    <select onChange={handleChange} value={assignedStudent?._id || ''}>
      {students.map((student) => (
        <option key={student._id} value={student._id}>
          {student.name}
        </option>
      ))}
    </select>
    <button type="submit">Submit</button>
  </form>
)

额外说明 #

如果需要监听assignedStudent的变化做其他操作，可以加一个监听用的useEffect：

useEffect(() => {
  // assignedStudent变化时触发，这里可以拿到最新值
  console.log('最新选中的学生：', assignedStudent)
}, [assignedStudent])

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