React 表单提交使用React Hook更新数据无效

直接上代码

import { useState } from "react";
import "./App.css";
function Form() {
  const[data,setData] = useState({firstName:'',lastName:''});
  function handleClick(e) {
  const{name,value} = e.target
    setData({...data,[name]:value})
  }
  
  function handleReset() {
  setData({firstName:'',lastName:''})
  }

  return (
    <form onSubmit={e => e.preventDefault()}>
      <input
        placeholder="First name"
        value={data.firstName}
        onChange={handleClick}
      />
      <input
        placeholder="Last name"
         value={data.lastName}
        onChange={handleClick}
      />
      <h1>Hi, {data.firstName} {data.lastName}</h1>
      <button onClick={handleReset}>Reset</button>
    </form>
  );
}
function App() {
  return (
    <>
      <Form></Form>
    </>
  );
}

export default App;

效果如下

问题

通过代码我们可以知道这里实现的功能是在input标签中输入内容，然后更新标题。但是实际测试发现输入内容后下面的标题并没有被更新。

原因

仔细观察input标签会发现改标签没有设置name属性，在 React 中，表单元素的 name 属性是必需的，用于指定表单数据的属性名。当省略 name 属性时，表单数据的属性名将会是 undefined，导致在使用 setData 函数更新组件的状态时出现问题。

具体来说，当我们在 handleChange 函数中使用 setData 函数更新组件的状态时，需要将当前的状态值与新的属性值合并，以确保更新后的状态值是最新的。如果我们省略了 name 属性，那么在更新状态时就无法获取到正确的属性名，导致更新后的状态值不符合预期。

因此，在使用 React 表单元素时，一定要确保每个表单元素都有正确的 name 属性，以便在更新组件的状态时获取到正确的属性名和属性值。

如何修改

如下：

 	  <input
        placeholder="First name"
        value={data.firstName}
           // name属性不能省略
        name="firstName"
        onChange={handleClick}
      />
      <input
        placeholder="Last name"
        value={data.lastName}
        onChange={handleClick}
        // name属性不能省略
        name="lastName"
      />

其他

React 并没有提供针对省略 name 属性的错误提示，因为这个错误不是 React 自身的问题，而是由于开发者的疏忽或不正确的使用造成的。所以这点需要特别注意。