如何在useState Hook中获取多输入框值及解决非受控转受控报错问题

• 核心原因：你写的useEffect没有传入依赖数组，这会导致每次组件重新渲染时都会重复执行接口请求，请求返回后调用setInputs把状态重置为接口返回的初始数据，你刚刚输入的内容就被直接覆盖了。
• 修复方案：给useEffect添加空依赖数组[]，让接口请求只在组件第一次挂载完成后执行一次：

useEffect(() => {
    Http.get(apiEndPoint, {
      params: {
        email: user.userEmail,
      },
    }).then((res) => setInputs(res.data));
// 新增空依赖数组
}, []);

如果user.userEmail可能动态变化需要重新拉取数据，就把它加入依赖数组：

}, [user.userEmail]);

• 核心原因：你初始化inputs状态的时候用的是空对象{}，初始状态下inputs.firstName、inputs.lastName等字段都是undefined。虽然你给Form.Control的value加了|| ""兜底，但如果存在遗漏加兜底的输入框、或者接口返回数据中缺少对应字段导致某个字段从undefined变为有效值，就会触发这个警告。
• 修复方案：初始化状态时给所有用到的表单字段设置空字符串默认值，从根源上避免值为undefined的情况：

const [inputs, setInputs] = useState({
  firstName: "",
  lastName: "",
  // 其他用到的表单字段都在这里补充初始空值
});

• 确认所有输入框的name属性值和inputs里的字段名完全匹配，大小写、拼写都要一致，否则handleChange无法正确更新对应字段的值
• 确认接口返回的res.data结构符合预期，没有嵌套层级错误导致字段赋值失败

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