項目預先考慮FlatList數據出現在列表

的底部我有這個FlatList組件在我的陣營原生應用程序，我想前面加上一個項目：我試圖更新列表項目預先考慮FlatList數據出現在列表

<FlatList 
    data={this.state.comments} 
    keyExtractor={this._keyExtractor} 
    extraData={this.state} 
    refreshing={this.state.refreshing} 
    renderItem={({item, index}) => (
    <CardComment navigate={this.props.navigation.navigate} report={item.reply}/> 
)} 
    removeClippedSubviews={false} 
/>

和在當前評論的頂部添加一個新項目。一個成功的請求後，這是我做我取什麼：

.then((r) => { 
    this.setState({ 
    refreshing: false, 
    loadingComments: false, 
    comments: [ 
     {reply: r}, 
     ...comments, 
    ], 
    }); 
});

即使我加入了新元素comments列表的開始，它仍然出現在FlatList時的底部它呈現。爲什麼，我該如何解決它？

來源

2017-08-29 gln

由於提問者最終意識到，這其實是相同的問題https://stackoverflow.com/q/45199769/1709587 - 你需要在渲染項目數組時提供'key'道具。請注意，考慮到上面<缺少'key'，這段代碼應該拋出一個警告，說* VirtualizedList：項目丟失鍵，請確保在每個項目上指定一個鍵屬性或提供銅... *。這是你錯過的線索！ –

-1

你可以這樣做，而不是：

const comments = this.state.comments.slice(); 
comments.unshift({ reply: 'Reply Q' }); 
this.setState({ comments: comments});

，這將觸發刷新。

下面顯示瞭如何解決您的問題... https://snack.expo.io/BkAi7StY-

來源

2017-08-29 08:02:36 sinewave440hz

嘿，謝謝，但沒有工作:( 順便說一句，正如在反應文件中所述，你不應該直接修改狀態，而應該使用setState。 – gln

好吧，我重新讀你的問題，並意識到你問的是實際更新的答案 - 試過並測試:) – sinewave440hz

順便說一下，我沒有直接修改狀態...我用setState ... – sinewave440hz

所以我發現了一些解決方法，而我似乎無法找到我的問題的答案。我保存我以前的註釋數組，setState來清理數組，以便我可以清理整個FlatList組件。然後，在第一個setState的回調函數中，我將新元素附加到第一個數組的開頭。

comments = this.state.comments; 
    this.setState({comments:[]}, function(){ 
     this.setState({ 
     comments: [ 
      {reply: r}, 
      ...comments, 
     ], 
     loadingComments: false, 
     }); 
    });

不過，如果有人有更好的解決方案或知道我的問題的解決方案，請讓我知道。 :)

UPDATE：這是真正解決我的問題：React Component's state renders strangely with .unshift(), but normal with .push()

來源

2017-08-29 04:25:51 gln

項目預先考慮FlatList數據出現在列表

回答

相關問題