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

我正在使用 React 构建一个 CRUD 应用程序，我想知道你是否能在这个问题上提供帮助。

我正在使用componentDidMount向服务器发起AJAX GET请求，该请求会检索数据，然后在成功函数中设置状态。在render函数中，我随后遍历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;

答案＃1

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

你有两个选择：

乐观地，它会立即更新用户界面，但是请求可能会失败，你需要处理这种情况。

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"
  });
}

悲观的，只会在请求成功时改变状态，但在界面更新之前可能需要一段时间。

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 这样的状态管理库。

答案＃2

你可以使用组件的 forceUpdate() 方法强制更新。这将确保你重新渲染。不过，如果你通过设置状态来响应那个调用返回的内容，这样也会重新渲染，会更好。