javascript - ReactNative 过滤数据

Question

我有 BeautifulPlacesCards 组件，用户可以在其中看到所有地方，我想实现过滤功能：当用户按下复选框“Mountains”时，当用户按下“Mountains”然后按下“Forest”时，他只能看到类型为山的地方他可以看到这两种类型的地方等等。当未按下所有复选框时，将显示所有未过滤的位置。

BeautifulPlacesCards 组件：

这就是我设置从服务器获取的地点的方式：

    const [data, setData] = useState([]);
    const [filteredData, setFilteredData] = useState(undefined);

在这里，我从服务器获取所有位置并将它们设置为数据：

useEffect(() => {
        fetch('https://beautiful-places.ru/api/places')
            .then((response) => response.json())
            .then((json) => setData(json))
            .catch((error) => console.error(error))
    }, [])

这是轮播，我检查过滤数据是否未定义的所有地方，而不是从数据中渲染所有地方：

 const renderItem = useCallback(({ item, index }: RenderItemProps) => {
        return (
    <TouchableWithoutFeedback onPress={() => onMarkerPress(item)}>
        <View>
            <Image {...{uri: item.images[0].image, preview}}
                style={{
                    backgroundColor: "floralwhite",
                    borderRadius: 5,
                    height: '80%',
                    width: width/1.4,
                }}
            />
        </View>
    </TouchableWithoutFeedback>
        );
    }, []);
    return (
        <View>
        <Header
            title="Карточки мест"
            left={{ icon: 'menu', onPress: () => navigation.openDrawer() }}
            right={{ icon: 'shopping-bag', onPress: () => true }}
        />
    <Categories filterDataFromChildren={filterDataFromChildren} />
        </View>
            <View style={{ marginTop: '10%', height: "80%", justifyContent: "center", alignSelf: "center",  alignItems: "center" }}>
                {data ? <Carousel
                    layout={"default"}
                    style={{ }}
                    ref={ref}
                    data={filteredData ? filteredData : data}
                    sliderWidth={width}
                    itemWidth={width/1.4}
                    renderItem={renderItem}
                    onSnapToItem={(index: number) => setActiveIndex(index)}
                /> : <AppLoading /> }

            </View>

我使用这个功能：

 const filterDataFromChildren = (index) => {
        setData(data)
        let filtered = data.filter(place => place.type == index[0])
        index ? setFilteredData(filtered) : setFilteredData(data)
    };

因为我的复选框在子组件中，所以我在按下复选框时使用道具发送此功能我得到了地方的类型。这就像回调。

<Categories filterDataFromChildren={filterDataFromChildren} />

我的问题是，当我按下复选框时，我当前的位置消失了，但实际应该被过滤的位置的 setFilterData 变为空数组，并且在获取后数据中的位置也变为初始状态：空数组。请告诉我在这种情况下，我应该如何以及在哪里保存我的数据，或者你将如何实现这个功能，因为我不知道如何以正确的方式做到这一点。

标签： javascriptreactjsreact-native