axios POST 两次提交名称：字段

Question

我在 ReactJS 中有一个非常简单的 POST 表单。我有两个字段，格式为 name 和 description。表单已提交，但我的问题是它将描述的值提交到名称和描述字段中。

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

我的 React JS 文件：从 'react' 导入 React；从 '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 });
  }

但这显然带来了不同。

我是 React 的新手，所以不确定我哪里出错了。

Answer 1

您正在使用来自提交时最后一个输入字段（描述）的相同输入值覆盖名称和描述。

使用输入字段名称属性来决定更新哪个键

将 handleChange 更改为

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

Answer 2

您应该遵循简单的方法：

1- 您所有的输入都应该有相应的同名状态变量，例如，如果您的输入名称为："name"、"description" 和 "snippet"，您应具有相同名称的相同状态变量，"name"、"description" 和 "snippet".

2- 你制作了一个统一的 handleChange() 函数，并且不要在其中提及输入名称，例如：

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

axios POST 两次提交名称：字段

Axios POST submitting name: field twice

javascript

api

reactjs

axios