React Native 中 FlatList 關於 key 的報錯解決方式

把這幾天我寫 FlatList 時遇到關於 key 的報錯解決方式統整一下。

Encountered two children with the same key

完整的錯誤內容如下:

Warning: Encountered two children with the same key, `[object Object]`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

以我的渣英文來理解大概就是:這個 List 中有幾個子項 key 是相同的,而大家都知道 key 必須唯一,這樣組件才能在要更新的時候知道更新的是誰,一旦 key 相同可能會導致子項被複製或被略過。

解決辦法

我本來是這樣寫的 keyExtractor={(item) => item}

<FlatList
   keyExtractor={(item) => item}
   data={data}
   ListEmptyComponent={<ListEmptyComponent done={done} search={true} />}
   style={{ flex: 1 }}
   renderItem={({ item }) => (
      <TouchableOpacity
         style={[
            styles.block,
            {marginBottom: 10,},
         ]}
         onPress={() => onPress(item)}
      >
        <StyleText color="#A9A9A9">
           {columns.map(({ key }) => (
              item[key]
            ))}
        </StyleText>
     </TouchableOpacity>
  )}
/>

只需要將 keyExtractor={(item) => item} 改為 keyExtractor={(item, index) => index.toString()} 用 index 取代即可:

<FlatList
   keyExtractor={(item, index) => index.toString()}
   data={data}
   ListEmptyComponent={<ListEmptyComponent done={done} search={true} />}
   style={{ flex: 1 }}
   renderItem={({ item }) => (
      <TouchableOpacity
         style={[styles.block, { marginBottom: 10 }]}
         onPress={() => onPress(item)}
      >
        <StyleText color="#A9A9A9">
           {columns.map(({ key }) => item[key])}
        </StyleText>
      </TouchableOpacity>
   )}
/>

missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.

這個問題就是說你的 List 並沒有給定 key,你必須確保為每個項目指定一個 key 或提供自定義 keyExtractor,解決的方式和上面相同,都是加上 keyExtractor={(item, index) => index.toString()} 即可。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論