React中数据库数据填充输入框后无法修改的问题求助

问题根源 #

你的几个尝试踩了React受控组件的常见坑：

• 第一种写法里，value绑定的是userDetails.lname，但onChange更新的是独立状态lname，两者没有关联，输入框的值始终被userDetails覆盖，自然没法编辑。
• 用defaultValue的话，它只在组件首次渲染时生效，后续userDetails更新不会同步到输入框，所以初始显示undefined。
• 直接用userDetails.lname初始化状态，组件挂载时userDetails还是空对象，userDetails.lname是undefined，状态初始为空，且后续userDetails更新不会自动同步到状态，所以输入框一直是空的。

解决方案 #

方案1：同步状态与userDetails #

保留独立的表单状态，在userDetails加载完成后同步更新状态：

const [lname, setLname] = useState("");

// 监听userDetails变化，同步更新表单状态
useEffect(() => {
  if (userDetails.lname) {
    setLname(userDetails.lname);
  }
}, [userDetails]);

<TextField
  fullWidth
  label="Last name"
  name="lname"
  required
  value={lname || ""}
  onChange={(e) => setLname(e.target.value)}
/>

方案2：直接以userDetails作为表单状态（更简洁） #

不用单独的lname状态，直接操作userDetails，加载和编辑逻辑统一：

// 初始化时给默认值避免undefined
const [userDetails, setUserDetails] = useState({ lname: "" });

// 统一处理输入变更
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setUserDetails(prev => ({ ...prev, [name]: value }));
};

<TextField
  fullWidth
  label="Last name"
  name="lname"
  required
  value={userDetails.lname}
  onChange={handleInputChange}
/>

额外优化：确保请求依赖正确 #

你的useEffect依赖数组为空，如果user.token是异步获取的，可能导致请求时token还不存在。建议把user加入依赖数组：

useEffect(() => {
  // 先判断token是否存在，避免无效请求
  if (!user?.token) return;
  
  axios
    .get("http://localhost:42690/api/users/user-details", {
      headers: { Authorization: `Bearer ${user.token}` },
    })
    .then((res) => {
      setUserDetails(res.data.fetchedUser);
    })
    .catch((err) => {
      toast.error("Failure to Load Profile");
    });
}, [user]);

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