Фильтрация элементов при нажатии feild в React Native

Question

У меня есть экран с разными карточками (с информацией о статьях). Я пытаюсь отфильтровать статьи по категориям, когда когда-либо нажимается удобная категория, я хочу, чтобы эта категория была выбрана, а статьи, принадлежащие к этой категории, отображались и, с другой стороны, все статьи из всех категорий должны отображаться, когда не выбрана никакая категория (это станет более понятным, если вы посмотрите на изображение ниже)

Код, используемый для отображения изображений из разных категорий:

import TouchableScale from "react-native-touchable-scale";
import { category } from "../api/data";

import colors from "../config/colors";

function HotTopics({ navigation }) {
  //const { width, height } = Dimensions.get("window");
  return (
    <View style={styles.Container}>
      <View>
        <Text style={styles.CategoryText}>Hot Topics</Text>
      </View>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{ paddingHorizontal: 15 }}
        data={category}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <View>
              <View>
                <TouchableScale
                  activeScale={0.9}
                  tension={50}
                  friction={7}
                  useNativeDriver
                  onPress={() => navigation.navigate({ id: item.id })}
                >
                  {/* to show the horizental news list*/}

                  <Image
                    source={{ uri: item.image }}
                    style={{
                      width: 100,
                      height: 120,
                      borderRadius: 16,
                      marginRight: 10,
                    }}
                  />

                  {/* to show the news titles inside the pictures*/}
                  <SharedElement
                    id={`item.${item.id}.text`}
                    style={{
                      width: 100,
                      position: "absolute",
                      bottom: 95,
                      //left: 10,
                      paddingHorizontal: 5,
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    <Text style={styles.blogTitle}>{item.title}</Text>
                  </SharedElement>
                  {/* to show the pictre of the author of the news article*/}

                  {/* to show the name of the author and read time of article*/}
                </TouchableScale>
              </View>
            </View>
          );
        }}
      />
    </View>
  );
}

Код, используемый для отображения приведенных ниже карточек статей: (ArticleList. js)

function ArticleList({ navigation, post }) {
  if (!post.length) {
    return null;
  } // so we dont show anything untill we have articles
  return (
    <>
      <View style={styles.Container}>
        <Text style={styles.HeadText}>Popular</Text>
        <Text style={styles.subText}>Show all</Text>
      </View>
      <FlatList
        showsVerticalScrollIndicator={false}
        data={post}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <TouchableScale
              activeScale={0.9}
              tension={50}
              friction={7}
              useNativeDriver
              onPress={() =>
                navigation.navigate("DetailScreen", { data: item })
              }
            >
              <Card item={item} />
            </TouchableScale>
          );
        }}
      />
    </>
  );
}

И на главном экране я вызываю ArticleList. js и фильтрую данные вот так:

// for filtering the data 
const filterResultsByCategory = (category) => {
    return post.filter((onepost) => {
      return onepost.category === category;
    });
  };
// to show the data 
<ArticleListVer post={filterResultsByCategory("Politics")} />

код, используемый для главного экрана:

import React, { useState } from "react";
import { StyleSheet, View, ScrollView, SafeAreaView } from "react-native";
import Header from "../components/Header";
import ArticleList from "../components/ArticleList";
import ArticleListVer from "../components/ArticleListVer";
import Categories from "../components/Categories";
import HotTopics from "../components/HotTopics";
import { LinearGradient } from "expo-linear-gradient";
import useArticles from "../hooks/useArticles";
import usePosts from "../hooks/usePosts";
function MainScreen({ navigation }) {
  const [Category, setCategory] = useState();
  const [loadApi, data, errorMessage] = useArticles();
  const [loadPost, post] = usePosts();
  const filterResultsByCategory = (category) => {
    return post.filter((onepost) => {
      return onepost.category === category;
    });
  };
  return (
    <View style={{ flex: 1 }}>
      {/* header Date and title */}
      <LinearGradient
        colors={["#353540", "#353540", "#1E1E24"]}
        style={{ width: "100%", height: "100%" }}
      >
        <SafeAreaView style={styles.container}>
          <ScrollView style={styles.scrollView}>
            <Header headerTitle="TODAY'S ARTICLES" />
            {/* haeder Categories */}
            <Categories />
            {/* show the data in a flatlist */}
            <ArticleList data={data} navigation={navigation} />
            {/* show the categories in a flatlist*/}
            <HotTopics onCategorySelect={this.setCategory} />
            {/* show the vertical Article list */}
            <ArticleListVer
              post={filterResultsByCategory(this.state.category)}
            />
          </ScrollView>
        </SafeAreaView>
      </LinearGradient>
    </View>
  );
}
MainScreen.navigationOptions = () => {
  return {
    headerShown: false,
  };
};
const styles = StyleSheet.create({});
export default MainScreen;

Answer 1

Самый простой способ справиться с этим - использовать функцию обратного вызова для установки состояния из компонента HotTopics примерно так, как показано ниже

const [category, setCategory] = useState();

In render

  <HotTopics onCategorySelect={setCategory} />
  <ArticleListVer post={filterResultsByCategory(category)} />

для onclick of hottopi c вы можете сделать

onPress={() =>
            this.props.onCategorySelect(item.category)
          }

Делая это, вы повторно визуализируете родителя с новой категорией. а для сброса вам понадобится кнопка, чтобы сбросить состояние на пустое, чтобы отображались все элементы.