Axios POST отправляющее имя: поле дважды

Question

У меня очень простая форма POST в ReactJS.У меня есть два поля в форме name и description.Форма отправляется, но моя проблема в том, что она отправляет значение описания в оба поля: name и description.

{data: {…}, status: 201, statusText: "Created"
{id: 9, name: "Testing the desc", description: "Testing the desc", …}

my React JS-файл: import React from 'response';импортировать axios из 'axios';

export default class NewDistillery extends React.Component {
  state = {
    name: '',
    description: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value, description: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();    
    axios.post(`http://localhost:3000/distilleries.json`, {name: this.state.name, description: this.state.description} )
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
          <h2>Add Distillery</h2>
        <form onSubmit={this.handleSubmit}>
          <label className="input-label">
            Name:
            <input className="input" type="text" name="name" onChange={this.handleChange} />
          </label>
          <label className="input-label">
            Description:
            <input className="input" type="text-area" name="description" onChange={this.handleChange} />
          </label>
          <button className="button" type="submit">Add</button>
        </form>
      </div>
    )
  }
}

Я пробовал некоторые варианты с событием setState, такие как:

  handleChange = event => {
    this.setState({ name: event.target.value});
    this.setState({ description: event.target.value });
  }

Но это, очевидно, имело одно отличие.

IЯ очень новичок в React, поэтому не знаю, где я ошибаюсь.

Answer 1

Вы должны следовать простому подходу:

1- Все входные данные должны иметь соответствующие переменные состояния с одинаковым именем, например, если у вас есть входные данные с именами: «имя», «описание» и «фрагмент», у вас должны быть одинаковые переменные состояния с точные имена, «имя», «описание» и «фрагмент».

2- Вы создаете единую функцию handleChange () и не упоминаете входные имена внутри нее, например:

handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  }

Answer 2

Вы перезаписываете имя и описание одним и тем же значением ввода, полученным из последнего поля ввода при отправке, которое является описанием.

Используйте атрибут имени поля ввода, чтобы решить, какой ключ обновлять

Изменить дескрипторИзменить на

 handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
 }