时间戳

首页 > 解决方案 > axios POST 提交名称：字段两次

javascript - axios POST 提交名称：字段两次

问题描述

我在 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 很陌生，所以不确定我哪里出错了。

标签： javascriptreactjsapiaxios

解决方案

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

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

将句柄更改为

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

推荐阅读