React中Form.Control无法绑定对象类型状态值的问题求助

你的代码核心问题出在handleChange函数的解构逻辑，以及输入框缺少name属性，导致状态更新失败，输入框无法同步内容。

错误原因分析 #

1. 解构对象错误：你在handleChange里写了const { name, value }=event.target.value;——event.target.value是输入框的文本内容（字符串类型），根本没有name属性，所以解构出的name是undefined。这会导致你更新状态时，实际是给newInfo添加了一个undefined键，而非修改newInfo.name，输入框绑定的newInfo.name始终为空。
2. 输入框缺少name属性：即使解构逻辑正确，输入框没有设置name="name"的话，event.target.name也取不到对应值，无法匹配状态对象的键。

修正后的代码 #

1. 修复handleChange函数

const [validated, setValidated] = useState(false);
const [newInfo, setNewInfo] = useState({
    name: ""
});

const handleChange = (event) => {
  // 从event.target解构name和value，而非event.target.value
  const { name, value } = event.target;
  setNewInfo({
      ...newInfo,
      [name]: value
  });
};

2. 给Form.Control添加name属性

<Form noValidate validated={validated}>
   <Form.Group >
      <Form.Label>Name</Form.Label>
      <Form.Control 
          required 
          type="text" 
          placeholder="Enter Name" 
          name="name" {/* 新增name属性，与状态对象的key对应 */}
          value={newInfo.name}
          onChange={handleChange} 
      />
      <Form.Control.Feedback type="invalid">Please choose a name.</Form.Control.Feedback>
   </Form.Group>
   <Button onClick={(e) => handleSubmit(e)} variant="primary">Submit</Button>
</Form>

补充说明 #

如果你想查看更新后的状态值，不要直接在setNewInfo后打印newInfo.name（因为setState是异步的），可以用useEffect监听状态变化：

useEffect(() => {
  console.log(newInfo.name);
}, [newInfo]);

内容的提问来源于stack exchange，提问作者ar.gorgin