将数组中的特定对象显示为平面列表中的第一项

Question

我有以下对象数组（只是示例，实际情况可能更多）

const items = [{/* for user 1 */}, {/* for user 2 */}, ... {/* for user 10 */}];

我将数组显示为 Flatlist

中的列表

<FlatList
   data={items}
   renderItem={renderItem}
   keyExtractor={item => item.id}
   initialNumToRender={20}
/>

renderItem是这样的

const renderItem = ({ item: user }) => (
    <TouchableOpacity 
    activeOpacity={1} 
    style={styles.items}
    onPress={() => {clickMe(user)}}
    >
        <UserAvatar url={user.url} />
        <Text style={styles.userName}>{ user.name }</Text>
    </TouchableOpacity>
);

到目前为止一切正常，列表可以正常显示。

但是假设我想将用户 9 显示为列表中的第一项，我该怎么做？

我试过这样做

const ninthUser = items.find( i => i.id === 9 );
const listWithoutNinth = items.filter( i => i.id !== 9 );
const listWithNinthAsFirstItem = [ ninthUser, ...listWithoutNinth ];

并将 listWithNinthAsFirstItem 传递给 Flatlist 的数据属性，但不知何故它不起作用。

Answer 1

你应该涉及国家。

const [ sortedItems, setSortedItems ] =  useState([])
const startSort = () => {
  const ninthUser = items.find( i => i.id === 9 );
  const listWithoutNinth = items.filter( i => i.id !== 9 );
  const listWithNinthAsFirstItem = [ ninthUser, ...listWithoutNinth ];
setSortedItems(listWithNinthAsFirstItem)
}
useEffect(() => {
  if (items) {
    startSort()
  }  
}, [items])

然后在 FlatList 中将数据作为 sortedItems

<FlatList data={sortedItems} renderItem={renderItem}
keyExtractor={item => item.id} initialNumToRender={20} />

将数组中的特定对象显示为平面列表中的第一项

Show certain object from the array as first item in flatlist

react-native

react-native-flatlist