React 表单仅发送一个属性状态，而不是整个状态

Question

我正在尝试将表单数据从我的 React 客户端发送到我的 nodejs 服务器；但是，在提交表单时，只有状态的最后属性会发送到我的服务器。我知道这是一个客户端问题，因为使用 Postman，我的整个表单数据都会发送到我的数据库。

似乎当我为我的状态中的每个属性添加一个值时，只有属性保留在 user 中。我无法在分配给自己的时间内解决这个问题，因此我希望能从另一个角度/反馈来了解这个问题。

const ModalForm = ({ show }) => {
  if (!show) {
    return null;
  }
  let [user, setUser] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    age: ''
  });

  let handleChange = (e) => {
    console.log('event name', e.target.name, 'event value', e.target.value);
    setUser({
      [e.target.name]: e.target.value
    });
  };

  /*
    currently, only the last prop and value are sending to my API
    need to resolve so that all form data is sent to API
  */
  let handleSubmit = (e) => {
    e.preventDefault()
    let data = user;
    setUser({[e.target.name]: e.target.value});
    axios.post('/new/user', data)
    .then(res => console.log(res))
    .catch(err => console.error(err))
  }
  console.log('user:', user);
  return (
    <div className='form-container'>
      <form className='form-space' onSubmit={handleSubmit}>
        <label>
          First Name:<br/>
          <input type='text' name='firstName' onChange={handleChange}/>
        </label><br/>
        <label>
          Last Name:<br/>
          <input type='text' name='lastName' onChange={handleChange}/>
        </label><br/>
        <label>
          Email:<br/>
          <input type='email' name='email' onChange={handleChange}/>
        </label><br/>
        <label>
          Password:<br/>
          <input type='password' name='password' onChange={handleChange}/>
        </label><br/>
        <label>
          Age:<br/>
          <input type='text' name='age' onChange={handleChange}/>
        </label><br/>
        <input type='submit' value='Submit' />
      </form>
    </div>
  )
};

export default ModalForm;

Answer 1

useState 状态设置器与功能组件中的 setState 不同；在功能组件中，状态对象的属性即使在使用缺少这些属性的对象调用 setState 时也会保留。就像 Object.assign.

在 class 组件中，从 { foo: true } 状态开始并执行 setState({ bar: true }) 结果 { foo: true, bar: true }.

但是useState在功能组件中不是这样的。新状态 完全取代 旧状态，而不是将旧状态与新状态合并。从 { foo: true } 状态开始并执行 setState({ bar: true }) 结果 { bar: true }.

在这里，既然你在做

setUser({
  [e.target.name]: e.target.value
});

user 的任何先前属性都将丢失。

改为将 user 的先前值传播到新状态中，以便保留先前的状态属性：

setUser({
  ...user,
  [e.target.name]: e.target.value
});

React 表单仅发送一个属性状态，而不是整个状态

React form is sending only one property of state, rather than entire state

javascript

reactjs

react-hooks

react-hook-form

React 表单仅发送一个 属性 状态，而不是整个状态

React form is sending only one property of state, rather than entire state

javascript

reactjs

react-hooks

react-hook-form

React 表单仅发送一个属性状态，而不是整个状态