AJAXリクエスト後のRe-Render 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ハンドラの状態を更新します。次の2つのオプションが持っている

：楽観

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のような状態管理ライブラリに飛び込むことができます。

Answer 2

コンポーネントのforceUpdate()メソッドを使用して強制的に更新することができます。これにより、再レンダリングが確実に行われます。しかし、状態を設定することによって返された呼び出しに応答した方が良いでしょう。状態も再描画されます。

Answer 3

あなたのアプリケーションの残りの部分はわかりませんが、あなたのコードはもっと大きなもののモジュールだと思います。 es2015の構文を使用しているので、私はこのようにしたいと思います。

<MyApp />の状態を更新することができます。そして、あなたは小道具、あなたが脂肪を矢印の機能を使用する場合は、バインドする必要はありません（ここでは(e)=> this.delete(e)にあなたのonClickを変更するには、この<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> 
)} 
} 

のようなあなたの<MyApp />の状態を更新する機能として、状態を渡しますこれはもう。

あなたの削除機能で、あなたが今のデータを使用して<MyApp />であるonDelete(data)を呼び出すことができます。これは、あなたのアプリが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; 

幸運！