React NativeでFlatListの1つのアイテムを更新するには？

Question

私がTwitterのクローンを書いているとしますが、ずっと簡単です。私は各アイテムをFlatListに入れ、それらをレンダリングします。

投稿を「好き」にするには、投稿の「好き」ボタンを押して「好き」ボタンが赤くなり、もう一度押すと灰色に変わります。

this.stateにすべての読み込まれた投稿が格納されています。各投稿には「お気に入り」というプロパティがあり、ブール値で、このユーザーがこの投稿を好きだったかどうかを示します。 」のような、私はそうのような記事を更新するために、this.setStateを使用し、その後state.postsに移動し、そのポストのlikedプロパティを更新し、このアプローチは動作します

// 1. FlatList 
<FlatList 
    ... 
    data={this.state.posts} 
    renderItem={this.renderPost} 
    ... 
/> 

// 2. renderPost 
renderPost({ item, index }) { 
    return (
     <View style={someStyle}> 
      ... // display other properties of the post 
      // Then display the "like" button 
      <Icon 
       name='favorite' 
       size={25} 
       color={item.liked ? 'red' : 'gray'} 
       containerStyle={someStyle} 
       iconStyle={someStyle} 
       onPress={() => this.onLikePost({ item, index })} 
      /> 
      ... 
     </View> 
    ); 
} 

// 3. onLikePost 
likePost({ item, index }) { 
    let { posts } = this.state; 
    let targetPost = posts[index]; 

    // Flip the 'liked' property of the targetPost 
    targetPost.liked = !targetPost.liked; 

    // Then update targetPost in 'posts' 
    posts[index] = targetPost; 

    // Then reset the 'state.posts' property 
    this.setState({ posts }); 
} 

、しかし、それは遅すぎます。 「好きな」ボタンの色は、それを押すと反転しますが、通常は色が変わる前に約1秒かかります。私が欲しいのは、私がそれを押すと同時に色がほぼ同時に反転するということです。

私はこれがなぜ起こるか知っていますが、おそらくthis.setStateを使用してはいけませんが、他にどのような方法を試すことができますか？

Answer 1

アンドロイドでテストする場合は、デベロッパーモードをオフにしてください。または、いくつかのAPIを使用して、サーバー上のポストを更新し、サーバー応答に対応するUIのようなボタンを更新していますか？それは私に教えてください場合は、私もこれを遭遇したと私はそれを解決した。また、あなたのコードの最後の2行目は必要ではないとコメントしました。

// 1. FlatList 
<FlatList 
    ... 
    data={this.state.posts} 
    renderItem={this.renderPost} 
    ... 
/> 

// 2. renderPost 
renderPost({ item, index }) { 
    return (
     <View style={someStyle}> 
      ... // display other properties of the post 
      // Then display the "like" button 
      <Icon 
       name='favorite' 
       size={25} 
       color={item.liked ? 'red' : 'gray'} 
       containerStyle={someStyle} 
       iconStyle={someStyle} 
       onPress={() => this.onLikePost({ item, index })} 
      /> 
      ... 
     </View> 
    ); 
} 

// 3. onLikePost 
likePost({ item, index }) { 
    let { posts } = this.state; 
    let targetPost = posts[index]; 

    // Flip the 'liked' property of the targetPost 
    targetPost.liked = !targetPost.liked; 

    // Then update targetPost in 'posts' 
    // You probably don't need the following line. 
    // posts[index] = targetPost; 

    // Then reset the 'state.posts' property 
    this.setState({ posts }); 
}