javascript - AJAX 请求后重新渲染 React 组件

Question

我正在使用 React 构建一个 CRUD 应用程序，我想知道您是否可以帮助解决这个问题。

我正在使用 componentDidMount 发出 AJAX GET 请求到检索数据的服务器，然后在成功函数中设置状态。然后在渲染函数中映射 state数组并将每个状态渲染成 <li>元素并包含一个 <button>元素。

当 <button>元素被点击它调用delete()功能。然后调用 ID 上的 AJAX DELETE 请求。

我的问题是如何让组件在 AJAX 请求成功后重新渲染或更新状态？

import React from 'react';

class PostList extends React.Component {
  constructor() {
    super();
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    $.ajax({
       url: '/posts',
       type: "GET",
       dataType: 'json',
       cache: false,
       success: function(data) {
         this.setState({posts: data})
       }.bind(this)
    });
  }

  delete(event) {
    let postId = event.target.parentNode.getAttribute("data-id");
      $.ajax({
         url: '/posts/' + postId,
         type: "DELETE",
         success: function(data) {
          console.log(data);
         }.bind(this)
      });
  }

  render() {
    let posts = this.state.posts.map( (index) => {
      return <li data-id={index._id} className="list-group-item"><a href={"posts/" + index._id}>{index.title}</a><button className="btn btn-default" onClick={this.delete.bind(this)}>Delete</button></li>
    })
    return (
      <ul className="list-group">
        {posts}
      </ul>
    )
  }
}

export default PostList;

Answer 1

更新 delete 处理程序中的状态。

你有两个选择:

1. 乐观，它会立即更新 UI，但是，请求可能会失败，您需要处理这种情况。

   delete(event) {
     let postId = event.target.parentNode.getAttribute("data-id");
     this.setState({
       posts: this.state.posts.filter(post => post._id !== postId)
     })
     $.ajax({
        url: '/posts/' + postId,
        type: "DELETE"
     });
   }
   

2. 悲观，只会在请求成功时改变状态，但可能需要一段时间才能更新 UI。

   delete(postId) {
     $.ajax({
        url: '/posts/' + postId,
        type: "DELETE",
        success: function(data) {
         this.setState({
           posts: this.state.posts.filter(post => post._id !== postId)
         })
        }.bind(this)
     });
   }
   

---

为了处理状态，您可以深入研究状态管理库，例如 Redux .