Question

我是大三学生。我无法在Internet上找到信息，也无法自己解决。我为我的应用程序使用了axios的反应。通过发布请求，我想添加一个新用户。如何在页面上显示新用户？不在控制台中。

Files

Answer 1

为您的状态定义一个新密钥，当您获得响应时，将其存储在该密钥中

state = {
  name: '',
  res: []
}

onSubmit = async e => {
  e.preventDefault();
  const data = { name: this.state.name };

  const response = await axios.post('https://jsonplaceholder.typicode.com/users', data);
  this.setState({res: response.data});
}

使用异步等待，它更容易，更干净。只是个人喜好

Answer 2

您不需要对此进行发布请求。试试这个：

import React from "react"; import axios from "axios";

class PersonInput extends React.Component {
  state = {
    name: '',
    users: ''

  }
  handleChange = (event) => {
      this.setState({name: event.target.value});
  }
  handleSubmit = (event) => {
      event.preventDefault();
      this.setState({users: this.state.name});
}

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            User Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add user</button>
          <ul>{this.state.users}</ul>
        </form>
      </div>
    );
  }
}

export default PersonInput;

如何在页面上显示新用户？

2 个答案: