Блог

Я пытаюсь отправить данные формы из моего клиента 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;
 

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
});