React表单无法填充数据库数据（已成功获取）及useEffect依赖警告

问题分析与解决步骤 #

1. 修复useEffect依赖警告并保证数据正确加载 #

你的useEffect依赖数组缺失id，这会引发两个问题：

• React抛出react-hooks/exhaustive-deps警告
• 路由参数id变化时，组件不会重新发起请求获取新用户数据

修改代码：
将id添加到useEffect的依赖数组中：

useEffect(() => {
  UsersService.findUserById(id)
    .then((res) => {
      console.log(res.data);
      setUser(res.data);
    })
    .catch((error) => {
      console.log(error);
    });
}, [id]); // 此处添加id作为依赖项

2. 排查表单不显示数据的核心原因 #

你能通过console.log(res.data)看到数据，但表单未渲染，大概率是后端返回的字段名与state定义的字段不匹配，或是返回数据存在嵌套结构。

• 先确认res.data的字段名：比如后端返回userName/passWord（驼峰格式），但你state里定义的是username/password（全小写），字段名不匹配会导致赋值失败。
• 若后端返回嵌套结构（如{ data: { username: "xxx", password: "xxx" } }），则需要取res.data.data进行赋值。

验证与修复方法：
在setUser前打印字段对应值，确认是否匹配：

.then((res) => {
  console.log("返回的username:", res.data.username);
  console.log("返回的password:", res.data.password);
  // 若字段名不匹配，手动映射赋值
  setUser({
    username: res.data.userName || res.data.username,
    password: res.data.passWord || res.data.password
  });
})

3. 优化handleChange的闭包问题（可选但推荐） #

当前handleChange使用user的快照值，连续修改时可能出现状态不同步，建议改用函数式更新：

const handleChange = (e) => {
  setUser(prevUser => ({ ...prevUser, [e.target.name]: e.target.value }));
};

4. 确保更新接口携带用户ID #

你的更新接口UsersService.updateUser(user)可能需要用户ID才能正确执行，建议把ID加入state：

const [user, setUser] = useState({
  id: "",
  username: "",
  password: "",
});

// 在useEffect赋值时带上ID
setUser({ ...res.data, id: id });

或者调用更新接口时传入ID：

UsersService.updateUser({ ...user, id: id })

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