无法更改反应输入字段状态，始终以初始值结束答案

【问题标题】：Unable to change react input field state , Always Ends up with the initial value无法更改反应输入字段状态，始终以初始值结束
【发布时间】：2022-11-26 01:36:47
【问题描述】：

这是我正在尝试构建的编辑个人资料功能。首先我获取用户详细信息并通过将它们分配给状态来填写字段

const [name, setName] = useState('')

useEffect(() => {
if (localStorage.getItem('userInfo') === null) {
    navigate('/login')
}
else{
userInfo=JSON.parse(localStorage.getItem('userInfo'))
setName(userInfo.name)
}
},)

直到现在一切都很好我可以在输入字段默认值中看到名称

 <Form onSubmit={submitHandler}>
        <Form.Group controlId='name'>
          <Form.Label>Name</Form.Label>
          <Form.Control
            type='name'
            placeholder='Enter name'
            defaultValue={name}
            onChange={(e) => setName(e.target.value)}
          ></Form.Control>
        </Form.Group>
    </Form>

当我提交表单时，我仍然向服务器发送初始值而不是编辑后的值。

【问题讨论】：

你能显示表单提交功能吗？
const submitHandler = async (e) => { e.preventDefault() if (password !== confirmPassword) { setMessage('密码不匹配') } else { const formData={name} updateResponse=await updateUser(formData);控制台日志（更新响应）}}

标签： javascript reactjs react-native forms

【解决方案1】：

也许您需要通过在 useEffect 的依赖数组中添加 [] 来仅在组件首次渲染时调用 useEffect

【讨论】：

谢谢这个解决方案有效。
很高兴知道:-)

【解决方案2】：

您需要向 onChange 参数添加功能。我添加了代码示例。

export default function App() {
      const [name, setName] = useState(""); // useState hook

  // handle change event
  const handleChange = (e) => {
    e.preventDefault(); // prevent the default action
    setName(e.target.value); // set name to e.target.value (event)
  };

  // render
  return (
    <div>
      <Form>
        <Form.Group>
          <Form.Control
            defaultValue={name}
            type="name"
            onChange={handleChange}
          ></Form.Control>
        </Form.Group>
      </Form>
    </div>
  );
}

【讨论】：

You need to add function to onChange Param 是什么意思？
如果你添加函数会比直接添加 useState 变量更好。还有一件事，不要忘记阻止默认操作并设置值。这很重要。
您看到上面@Tarmah 的回答了吗？

【解决方案3】：

将 defaultValue 替换为 value

并以这种方式使用 useEffect React useState

【讨论】：

如果我用值替换，我什至无法编辑输入字段
反应会抛出任何错误吗？你检查过控制台了吗？
不，但我现在知道为什么会这样了。每次我更改输入字段、状态更改并且组件重新呈现时，显然 useEffect 再次运行并将值设置为初始值
我正在考虑现在使用 useRef 而不是 usestate