如何在React Native中更新FlatList中的單個項目？

Question

假設我正在寫一個Twitter的克隆，但是要簡單得多。我把每個項目放在FlatList中並渲染它們。

要「喜歡」一篇文章，我按下帖子上的「喜歡」按鈕，「喜歡」按鈕變成紅色，我再次按下，它變成灰色。

這是我到目前爲止：我將所有加載的帖子存儲在this.state中，每個帖子都有一個名爲「likes」的屬性，它是布爾值，表示此用戶是否喜歡此帖子，當用戶按下「像」，我去state.posts和更新後的liked屬性，然後用this.setState更新的帖子，像這樣：

// 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

如果您在android上測試，請嘗試關閉開發者模式。還是你打了一些API並更新服務器上的帖子，並更新UI中對應於服務器響應的按鈕？如果是這樣的話，請告訴我，我也遇到過這個，我解決了它。此外，我還評論了代碼中不需要的第二行。

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