React可编辑预填充表单问题求助

核心问题是表单状态绑定不统一：你用rows.firstName作为输入框的value值，但onChange却更新独立的firstName状态，两者没有关联，导致输入框的值始终停留在从API获取的初始值，无法随输入更新。

具体修正步骤 #

1. 统一表单状态 #

将原来的rows状态改为专门管理表单数据的状态，初始化为空对象（单个用户是对象，不是数组）：

const [userForm, setUserForm] = useState({});

2. 修正API请求后的状态赋值 #

从API获取用户数据后，直接将数据赋值给userForm：

useEffect(() => {
    const config = {
      headers: { "x-auth-token": token },
    };

    const fetchData = async () => {
      const results = await api.get("/users/edituser/" + userID, config);
      // 直接将单个用户对象赋值给userForm
      setUserForm(results.data);
    };
    fetchData();
}, [userID, token]);

（注：setUserForm无需放入依赖数组，它是useState返回的稳定函数）

3. 修正输入框的绑定逻辑 #

输入框的value绑定userForm.firstName，onChange时通过展开运算符更新userForm对象：

<input
 type="text"
 className="form-control"
 id="inputEmail4"
 placeholder="First Name"
 name="firstName"
 value={userForm.firstName || ''} {/* 加||''避免初始时undefined导致的输入框异常 */}
 onChange={(e) => {
    setUserForm(prev => ({
        ...prev,
        firstName: e.target.value
    }))
 }}
/>

额外说明 #

• 如果API返回的是包含单个用户的数组，需取数组第一项赋值：setUserForm(results.data[0])
• 其他输入框（如lastName、email等）都按照同样逻辑修改，统一用userForm状态管理，确保value与onChange的状态一致

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