如何筛选FlatList中符合指定键值的条目，仅展示来自加拿大的人员数据

核心思路 #

直接对原数据源调用数组filter()方法，筛选符合from === 'Canada'条件的条目后，再传入FlatList的data属性即可。

完整代码示例 #

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

// 原数据
const DATA = [
  {
    id: "1",
    from: "Canada",
    name: "person1",
  },
  {
    id: "2",
    from: "Canada",
    name: "person2",
  },
  {
    id: "3",
    from: "France",
    name: "person3",
  }];

const Item = ({ name, from }) => (
  <View style={styles.item}>
    <Text style={styles.name}>{name}</Text>
    <Text style={styles.from}>来自：{from}</Text>
  </View>
);

export default function App() {
  // 过滤得到仅来自加拿大的条目
  const filteredData = DATA.filter(item => item.from === 'Canada');

  const renderItem = ({ item }) => (
    <Item name={item.name} from={item.from} />
  );

  return (
    <FlatList
      data={filteredData}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  name: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  from: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  }
});

拓展说明 #

• 如果需要动态切换筛选条件（比如支持切换不同国家筛选），可以把筛选值存在useState中，过滤逻辑会随状态变化自动更新：

const [filterCountry, setFilterCountry] = useState('Canada');
const filteredData = DATA.filter(item => item.from === filterCountry);
// 后续可通过调用setFilterCountry修改筛选条件，自动更新FlatList展示内容

• filter()方法不会修改原数组，仅返回符合条件的新数组，不会影响其他业务逻辑对原完整数据的使用。

内容的提问来源于stack exchange，提问作者Mohammad Massri