Question

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

我正在向服务器发出一个带有componentDidMount的AJAX GET请求，该服务器检索数据，然后在success函数中设置状态。在渲染函数中，我然后映射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处理程序中的状态。

你有两个选择：

乐观，它会立即更新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"
  });
}

悲观，只会通过成功请求改变状态，但可能需要一段时间才能更新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等状态管理库。

Answer 2

我不知道您的应用程序的其余部分是如何工作的，但我猜您的代码是“更大”的模块。由于你使用es2015语法，我认为你可以像这样实现你想要的东西。

您想要的是更新<MyApp />或您拥有的状态。然后你将状态作为道具和将更新<MyApp />状态的函数传递给<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>
  )}
}

在这里，您将onClick更改为(e)=> this.delete(e)（如果使用胖箭头功能，则不再需要将其绑定。

在您的删除功能中，您现在可以使用数据调用onDelete(data)中的<MyApp />。这将使您的应用重新呈现每个时刻。

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;

祝你好运！

Answer 3

您可以使用组件的forceUpdate()方法强制更新。这将确保您重新渲染。但是，如果您通过设置状态响应任何返回的调用，它也会更好。这也会重新渲染。

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

3 个答案: