函数组件重渲染时如何为useForm的setValue设置表单值

问题根因 #

• 触发setValue的useEffect依赖为空数组，只会在组件首次挂载时执行，此时异步拉取的redux数据还未返回，students为空数组，筛选出的user无有效值，访问user.name必然报错
• 你用filter筛选用户返回的是数组类型，数组本身没有name属性，即使数据加载完成也拿不到正确值
• 额外声明的students本地状态属于冗余存储，直接使用从redux取到的users即可，不需要多一层状态同步

修复方案 #

1. 把筛选用户的逻辑换成find方法，直接取匹配的单个用户对象
2. 给setValue对应的useEffect添加正确依赖：user、setValue，确保redux数据更新、匹配到用户后才触发表单赋值
3. 赋值前添加判空逻辑，避免无匹配用户时报错
4. 移除冗余的students本地状态

修复后代码 #

import React, { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { fetchData } from "./utils/index";
import { UpdateStudent} from "./utils/index";

function Update() {
  const users = useSelector((state) => state.students);
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors, isDirty, isValid },
  } = useForm({ mode: "onChange" });
  const { id } = useParams();
  // 用find取单个用户，替换filter
  const user = users?.find((u) => u.id === parseInt(id));

  useEffect(() => {
    fetchData();
  }, []);

  // 添加正确依赖，判空后再赋值
  useEffect(() => {
    if(user) {
      setValue("name", user.name);
    }
  }, [user, setValue]);

  const onUpdate = (data) => {
    // 自行补充更新逻辑
  };

  return (
    <form onSubmit={handleSubmit(onUpdate)}>
      <div>
        <input
          {...register("name", {})}
          type="text"
          className="form-control"
          placeholder="Name"
        />
      </div>
      <button
        color="primary"
        type="submit"
        disabled={!isDirty || !isValid}
      >
        Save
      </button>
    </form>
  );
}

export default Update;

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