在AJAX请求之后重新渲染React组件

Question

I'm building a CRUD application with React and I wondered if you could help on this issue.

I am making a AJAX GET request with componentDidMount to the server which retrieves the data and then sets the state in the success function. In the render function I then map over the state array and render each state into a <li> element and include a <button> element.

When the <button> element is clicked it calls the delete() function. This then calls the AJAX DELETE request on the ID.

My problem is how do I get the component to re-render or update the state after the AJAX request is a success?

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

Update the state in the delete handler.

You've got two options:

1. optimistic, it instantly updates the UI, however, the request could fail and you need to handle this case.

    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. pessimistic, will only mutate the state with a successful request, but could take a while before the UI is updated.

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

---

For handling state, you could dive into state management libraries like Redux .

Answer 2

I dont know how the rest of your app works, but I guess your code is a module of something "bigger". Since you use es2015 syntax I think you can achive what you want like this.

What you want is to update the state on your <MyApp /> or what ever you have. And then you pass the state as a prop and the function that will update the state of your <MyApp /> like this <PostList posts={this.state.posts} onDelete={this.onDelete()}/>

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

onDelete(data){
  this.setState({posts: data})
}

render(){
  return (    
    <div>
      <PostList posts={this.state.posts} onDelete={this.onDelete()}/> 
    </div>
  )}
}

Here you change your onClick to (e)=> this.delete(e) (if you use fat arrow functions you do not need to bind this anymore.

In your delete function you can now call onDelete(data) that is in your <MyApp /> with the data. This will make your app re-render everyhitng.

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");
    let data;
      $.ajax({
         url: '/posts/' + postId,
         type: "DELETE",
         success: function(_d) {
          data = _d;
         }.bind(this)
      });
      onDelete(data);
  }

  render() {
    let posts = this.props.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={(e)=> this.delete(e)}>Delete</button></li>
    })
    return (
      <ul className="list-group">
        {posts}
      </ul>
    )
  }
}

export default PostList;

Good luck!

Answer 3

You can force update using the component's forceUpdate() method. That will ensure you re-render. However, it'd be better if you responded to whatever that call returned by setting the state, which will also re-render.