React中useForm初始化表单值返回undefined问题解决

你遇到的undefined问题本质是React状态初始化时序+异步请求的竞态问题，核心有3个错误点：

• EditUser组件挂载时机早于接口返回：点击编辑按钮时先执行setOpen(true)，Modal和内部的EditUser会立即挂载，这时候setGetId(id)刚触发，全局的useRequestData还没拿到新id发起请求/返回数据，user初始值是空数组[]，user[0]自然是undefined。
• useState只在组件首次挂载时取初始值：写的const [nameUser, setName] = useState(user[0]?.name)只会在组件第一次渲染时执行赋值，后续即使user接口返回更新了，这个state也不会自动同步。控制台能打印到值是因为控制台打印的是对象引用，后续数据更新后展开看到的是最新值，但表单初始化流程早就跑完了。
• 空数组判断逻辑失效：写的user === []永远是false，JS里数组是引用类型，两个独立空数组的引用地址不一样，这个判断根本不会进入loading分支。

按下面步骤修改即可正常填充表单：

1. 修正Modal渲染时机与状态重置逻辑 #

不要在点击时立刻挂载编辑组件，关闭弹窗时记得重置请求id避免数据串流：

// DataTable组件内补充关闭方法
const handleCloseModal = () => {
  setOpen(false);
  setGetId(''); // 重置id，避免下次打开拿到上一次的旧数据
};

// Modal部分修改
<Modal
  open={open}
  onClose={handleCloseModal}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  {/* 只有存在有效请求id时才挂载编辑组件，避免空值初始化 */}
  {getId ? <EditUser onClose={handleCloseModal}/> : null}
</Modal>

额外提醒：你在DataTable里从Context解构的是users（复数），但GlobalState里传递的字段是user（单数），注意命名统一，避免解构直接取到undefined。

2. 修正表单初始化与同步逻辑 #

移除多余的nameUser中间状态，等接口数据返回后通过副作用同步填充表单，同时修正loading判断：

function EditUser({ onClose }){
  const {user} = useContext(GlobalStateContext)
  // 先初始化空表单，注意确认你的useForm暴露了setForm/reset方法用来更新表单值
  const [form, handleInputChange, clear, setForm] = useForm({
    name: "",
    company: "",
    email: "",
    phone: "",
    adress: "",
    note: "",
    isActive: true,
  });

  // 监听全局user数据变化，接口返回数据后自动填充到表单
  useEffect(() => {
    if (user.length > 0 && user[0]) {
      setForm({
        name: user[0].name || "",
        company: user[0].company || "",
        email: user[0].email || "",
        phone: user[0].phone || "",
        adress: user[0].adress || "",
        note: user[0].note || "",
        isActive: user[0].isActive ?? true,
      })
    }
  }, [user])

  const onSubmitForm = (e) => {
    e.preventDefault();
    createUser();
  };

  // 正确的加载状态判断：空数组代表还未拿到接口数据
  if (user.length === 0) {
    return <h4>Loading...</h4>
  }
  
  return(
    <CreateUserModal>
      <FormContainer>
        <FormHeader>
          <HeaderButton>
            <IconButton onClick={onClose}>
              <CloseIcon />
            </IconButton>
          </HeaderButton>
          <FormTitle>
            <h3>Data</h3>
            <hr />
          </FormTitle>
        </FormHeader>
        <form onSubmit={onSubmitForm}>
          <InputContainer>
            <TextField
              name="name"
              value={form.name}
              onChange={handleInputChange}
              required
              color="secondary"
              margin="normal"
            />
            <TextField
              name="company"
              value={form.company}
              onChange={handleInputChange}
              color="secondary"
              margin="normal"
            />
            {/* 其余表单项按相同规则绑定value即可 */}
          </InputContainer>
        </form>
      </FormContainer>
    </CreateUserModal>
  )
}

如果你的useForm没有暴露setForm方法，在hook内部加一个即可，核心逻辑就是修改内部存储表单值的state，和普通组件的setState逻辑一致。

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