React|Rest API：将表单数据存储到 REST 上的对象中 API

Question

我已经设置了一个 React Web 应用程序，该应用程序当前列出了 mongodb 中的所有 "Employees"。

我现在正在尝试 "add" 员工通过 React 前端表单访问数据库。

我已经设法将数据从表单传递到应用程序，但我不确定我需要经历哪些过程才能真正将数据固化到一个对象中并存储在 api .

请原谅我的代码，这很恶心，因为这是我第一周学习 React（老实说，我几乎没有 js 知识，那是另一回事）而且我只是拼凑了 20 个教程....

这是我的表格 class:

class Form extends React.Component {
  state = {
    fullname: '',
  }

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

  onSubmit = e => {
    e.preventDefault();
    this.props.onSubmit(this.state)
    this.setState({
      fullname: ''
    })
  }

  render() {
    return <div>
      <form>
        <input name="fullname" placeholder="Full Name" value={this.state.fullname} onChange={e => this.change(e)} />
        <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
    </div>
  }

}

和我的清单(?)class:

class EmployeeList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {employee: []};
    this.EmployeeList = this.EmployeeList.bind(this)
    this.componentDidMount = this.componentDidMount.bind(this)
  }

  componentDidMount() {
    this.EmployeeList();
  }

  EmployeeList() {
    fetch('/api/employees').then(function(data){
      return data.json();
    }).then( json => {
      this.setState({
        employee: json
      });
      console.log(json);
    });
  }

  onSubmit = fields => {
    console.log('app component got: ', fields)

  }

  render() {
    //return a mapped array of employees
    const employees = this.state.employee.map((item, i) => {
      return <div className="row">
        <span className="col-sm-6">{item.fullname}</span>
        <span className="col-sm-2" id={item.action1}></span>
        <span className="col-sm-2" id={item.action2}></span>
        <span className="col-sm-2" id={item.action3}></span>
      </div>
    });

    return <div>
      <Form onSubmit={fields => this.onSubmit(fields)}/>
      <div className="container">
        <div className="row">
        <div className="col-sm-6 bg-warning"><h3>Full Name</h3></div>
        <div className="col-sm-2 bg-success"><h3>Action 1</h3></div>
        <div className="col-sm-2 bg-success"><h3>Action 2</h3></div>
        <div className="col-sm-2 bg-success"><h3>Action 3</h3></div>
      </div>
      </div>



      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{ employees }</div>
      </div>

    </div>
  }
}

我已成功将数据传递给列表应用程序

onSubmit = fields => {
    console.log('app component got: ', fields)
}

但是我怎样才能发出 post 请求来存储我发送到数据库对象中的数据呢？然后重新加载页面以便显示所有员工的新列表？

非常感谢您的宝贵时间！

Answer 1

You can use fetch API to make POST request as well. Second parameter is the config object wherein you can pass the required request configurations.

fetch('url', {
  method: 'post',
  body: JSON.stringify({
      name: fields.fullname
  })
})
.then(response) {
  response.json();
}
.then( json => {
  this.setState({
    employee: json
  });
});

可使用的其他请求配置：

方法 - GET、POST、PUT、DELETE、HEAD
url - URL 请求
headers - 关联的 Headers 对象
推荐人 - 请求的推荐人
模式 - cors、no-cors、同源
credentials - cookie 是否应该与请求一起使用？省略，同源
重定向 - 跟随，错误，手动
完整性 - 子资源完整性值
cache - 缓存模式（默认、重新加载、无缓存）

React|Rest API：将表单数据存储到 REST 上的对象中 API

React|Rest API: Storing form data into an object on the REST API

rest

post

store

mongodb

reactjs