在 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等状态管理库。