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。

在类组件中，从状态 { 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 表单只发送状态的一个属性，而不是整个状态

1 个答案: