javascript - 在 FlatList React Native 中过滤数据

Question

我有一个带有数据的 FlatList，它应该响应两个组件的变化：搜索栏和类别选择器。我一次只能使用其中一个，并且只使用搜索栏或类别选择器进行过滤。

如何过滤数据，例如，当我选择一个类别并开始输入名称时（例如：选择“massage”并输入“John” - 应该什么都不显示，选择“massage”并输入“j” - 应该显示 Jason）

成分：

     <View style={styles.container}>
        <DropDownPicker
            placeholder="All"
            defaultValue={categories[0].label}
            items={filteredCategories}
            onChangeItem={(item) => {
                setFilter(item.value);
                setCategories(item.value);
            }}
        />
        <TextInput
            autoCapitalize="none"
            autoCorrect={false}
            clearTextOnFocus={true}
            style={styles here}
            onChangeText={(text) => {
                setSearchText(text);
            }}
            value={searchText}
        />
        <FlatList
            data={filteredData}
            renderItem={renderItem}
            keyExtractor={(item) => item.id}
        />
    </View>

状态和过滤器：

const [filter, setFilter] = useState("all");
const [categories, setCategories] = useState("all");
const [searchText, setSearchText] = useState();

//inital data
const data = [
    {
        id: "1",
        category: "massage",
        title: "Jason Bourne",
    },
    {
        id: "2",
        category: "massage",
        title: "Will Mohaw",
    },
    {
        id: "3",
        category: "stylist",
        title: "John Smith",
    },
];

//initial categories
const categoryData = [
    {
        label: "All",
        value: "all",
    },
    {
        label: "Massage",
        value: "massage",
    },
    {
        label: "Stylist",
        value: "stylist",
    },
];

//every single specialist
const Item = ({ title }) => (
    <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
    </View>
);

//rendering each specialist
const renderItem = ({ item }) => <Item title={item.title} />;

//sorting either by search or by category, below
const filteredData = searchText
    ? data.filter((x) =>
            x.title.toLowerCase().includes(searchText.toLowerCase())
      )
    : data;

//filter data in flatlist by category
/*const filteredData =
    filter != "all"
        ? data.filter((x) =>
                x.category.toLowerCase().includes(filter.toLowerCase())
          )
        : data;*/

标签： javascriptreactjsreact-nativefilter