在 axios 发送 POST 请求后更新状态

Question

我对React还不太熟悉，但我已经在后端(Express)上创建了一个CRUD，并希望将其绑定到React前端。我有一个表单，允许添加用户，当成功添加一个用户时，我希望状态能得到更新。我通过实现"document.createElement"和在5秒后使用setTimeout刷新页面来使其正常运行。我在思考如何在POST请求成功后让组件重新渲染(更新状态)。

以下是我目前已经完成的部分:

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: null
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:3000/customer_all")
      .then(res => {
        console.log(res);
        this.setState({ users: res.data });
      })
      .then(() => console.log(this.state.users.map(item => item.name)))
      .catch(err => console.log(err));
  }

  submit(e) {
    e.preventDefault();
    var form = document.forms[0];
    var data = {};
    var para = document.createElement("p");
    para.textContent = "Success";
    var id = document.getElementById("message");

    data.name = form.name.value;
    data.email = form.email.value;
    axios
      .post("http://localhost:3000/customer", {
        name: data.name,
        email: data.email,
        headers: {
          "Content-Type": "application/json"
        }
      })
      .then(response => {
        id.appendChild(para);
        setTimeout(() => window.location.reload(), 5000);
        form.reset();
      })
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div>
        <div id="message" />
        <form method="POST" onSubmit={this.submit}>
          <label htmlFor="name">Nume </label>
          <input type="text" name="name" /> <br />
          <br />
          <label htmlFor="email">Email </label>
          <input type="email" name="email" required />
          <input type="submit" value="Adauga" />
        </form>
        <ol>
          {!this.state.users
            ? "loading"
            : this.state.users.map((item, i) => <li key={i}>{item.name}</li>)}
        </ol>
      </div>
    );
  }
}

感谢您提前给予任何提示！

- raz

---

当您更新状态时，组件将重新渲染。如果要出现<p>，请将{{this.state.show_success && <p>Success</p>}}放在render方法中，然后将this.state.show_success设置为真。这样创建元素或刷新页面会完全破坏React模式。 - user5734311

@ChrisG 感谢您的回复！我应该如何更新列表以添加新用户？ - raz

当您将新用户发送到服务器时，只需让服务器也返回列表即可。这样，您就可以将this.state.users简单地设置为.post()结果的值。 - user5734311

在行 this.setState({ users: res.data }); 中，this 是在匿名函数内部。难道你不应该使用 self 引用类吗？ - subhasis

Answer 1

在submit方法中，将新用户添加到数组中并使用setState更新状态。

submit = (e) => {
e.preventDefault();
var form = document.forms[0];
var data = {};
var para = document.createElement("p");
para.textContent = "Success";
var id = document.getElementById("message");

data.name = form.name.value;
data.email = form.email.value;
axios
  .post("http://localhost:3000/customer", {
    name: data.name,
    email: data.email,
    headers: {
      "Content-Type": "application/json"
    }
  })
  .then(response => {
    const {users} = this.state;
    users.push(response.data);
    id.appendChild(para);
    this.setState({users});
    form.reset();
  })
  .catch(err => console.log(err));

}

- Tarek Essam