Filttering and mapping in react native/react

问题

My question here is, how do I map the 'products' object based on the tab I choose in the Products component? Example: In the Products component, it renders 8 tabs for each type of food (dataSaleThumb), if I choose 1 tab (out of 8) that has the value tab: "five" I need to filter and map out all of the products that have the prop category: "food". Or clicking on the tab that has the value tab: "six" maps out only the products that have the category:"beverages" prop. I hope you understood the question and I thank you all in advance!

class ProductsStore {
  @observable products = [
    {
        id: 1,
        name: 'sandwich',
        description: 'tasty',
        price: 150,
        catergory: "food"
    },
    {
        id: 2,
        name: 'fanta',
        description: 'orange drink',
        price: 250,
        catergory: "beverage"
    },
    {
        id: 3,
        name: 'hamburger',
        description: 'meat',
        price: 350,
        catergory: "food"
    },
    {
        id: 4,
        name: 'cola',
        description: 'caramel drink',
        price: 250,
        catergory: "beverage"
    }
];
}

export default ProductsStore;

import React, {Component} from "react";
import {View, Dimensions, TouchableOpacity,FlatList, Text} from "react-native";
import {Container, Content, List} from "native-base";
import {observer, inject} from "mobx-react";
import ThemeHeader from "../../components/Header/index.js";
import SaleThumb from "../../components/SaleThumb/index.js";
import SaleTitle from "../../components/SaleTitle/index.js";
import MyFooter from "../../components/Footer";
import styles from "./styles.js";

var deviceWidth = Dimensions.get("window").width;
var deviceHeight = Dimensions.get("window").height;

@inject("products")
@observer
class Product extends Component {
  
  render() {
    const navigation = this.props.navigation;
    
    var dataSaleThumb = [
      {
        id: 1,
        imageSaleThumb: require("../../../assets/p1.jpg"),
        text: "ABCDFG",
        tab: "one"
      },
      {
        id: 2,
        imageSaleThumb: require("../../../assets/p2.jpg"),
        text: "ABCDFG",
        tab: "two"
      },
      {
        id: 3,
        imageSaleThumb: require("../../../assets/p3.jpg"),
        text: "ABCDFG",
        tab: "three"
      },
      {
        id: 4,
        imageSaleThumb: require("../../../assets/p4.jpg"),
        text: "ABCDFG",
        tab: "four"
      },
      {
        id: 5,
        imageSaleThumb: require("../../../assets/p5.jpg"),
        text: "ABCDFG",
        tab: "five"
      },
      {
        id: 6,
        imageSaleThumb: require("../../../assets/p6.jpg"),
        text: "ABCDFG",
        tab: "six"
      },
      {
        id: 7,
        imageSaleThumb: require("../../../assets/p7.jpg"),
        text: "ABCDFG",
        tab: "seven"
      },
      {
        id: 8,
        imageSaleThumb: require("../../../assets/p8.jpg"),
        text: "ABCDFG",
        tab: "eight"
      }
    ];
    
    return (
      <Container>
        <ThemeHeader
          PageTitle="PRODUCT"
          IconLeft="ios-arrow-back"
          route="homepage"
          IconRight="ios-search"
          navigation={navigation}
        />
        <Content
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ paddingBottom: 10 }}
          style={{ marginBottom: 50 }}
        >
            <FlatList
              bounces={false}
              contentContainerStyle={styles.saleThumb}
              data={dataSaleThumb}
              renderItem={item => (
                <SaleThumb
                  navigation={navigation}
                  blockHeight={deviceHeight / 3 - 45}
                  blockWidth={deviceWidth / 3 - 10}
                  saleData={item.item.text}
                  imageSource={item.item.imageSaleThumb}
                />
              )}
            />
          </View>
        </Content>
        <MyFooter navigation={navigation} selected={"home"} />
      </Container>
    );
  }
}

export default observer(Product);

回答1:

For anyone wondering, I found a solution with a little help from a cousin.

First we add the category props in the dataSaleThumb object in the Product screen:

var dataSaleThumb = [
      {
        id: 1,
        imageSaleThumb: require("../../../assets/p1.jpg"),
        text: "ABCDFG",
        tab: "one",
        category: "beverage"
      },
      {
        id: 2,
        imageSaleThumb: require("../../../assets/p2.jpg"),
        text: "ABCDFG",
        tab: "two",
        category: "food"
      }
...

Then we declare an onPress function in the Product screen:

<FlatList
               bounces={false}
               contentContainerStyle={styles.saleThumb}
               data={dataSaleThumb}
               renderItem={item => (
                 <SaleThumb
       onPress={() => navigation.navigate("ProductCatalogue", {categoryId: categoryId})}
                   navigation={navigation}
                   blockHeight={deviceHeight / 3 - 45}
                   blockWidth={deviceWidth / 3 - 10}
                   saleData={item.item.text}
                   imageSource={item.item.imageSaleThumb}
                   categoryId={item.item.category}
                 />
               )}
             />

where ProductCatalogue (you can call it whatever you like) is the screen where the products with the specific category will render. After that in the ProductCatalogue screen you map the specific items with an IF statement like this:

renderItem={item => {
             if (item.item.category === navigation.getParam('categoryId')) {
               return(
                 <ListThumb
                    key={item.item.id}
                    navigation={navigation}
                    brand={item.item.name}
                    imageSource={item.item.image}
                    discountedPrice={item.item.price}
                    description={item.item.description}
                  />)
              }
              }}

This way it passes the props category from the Product screen onto the ProductCatalogue screen when you press on the specific tab. So now if I select tab 1 I will get only products with category: "beverage" and they will render in the ProductCatalogue screen, in this case, cola and fanta.

Hope I helped someone, cheers!

来源：https://stackoverflow.com/questions/63140938/filttering-and-mapping-in-react-native-react