Javascript react-native/react中的筛选和映射_Javascript_Reactjs_React Native_Filter_Mapping

Javascript react-native/react中的筛选和映射

javascript reactjs react-native filter mapping

Javascript react-native/react中的筛选和映射,javascript,reactjs,react-native,filter,mapping,Javascript,Reactjs,React Native,Filter,Mapping,我的问题是，如何根据我在产品组件中选择的选项卡映射“产品”对象？示例：在Products组件中，它为每种类型的食品呈现8个选项卡（DataSaleTumb），如果我选择1个选项卡（8个选项卡中的1个），其值为tab:“five”，我需要过滤并映射出所有具有属性类别：“food”。或者单击值为“六”的选项卡，仅映射出具有“饮料”类别的产品。我希望你能理解这个问题，我提前感谢大家 class ProductsStore { @observable products = [ {

我的问题是，如何根据我在产品组件中选择的选项卡映射“产品”对象？示例：在Products组件中，它为每种类型的食品呈现8个选项卡（DataSaleTumb），如果我选择1个选项卡（8个选项卡中的1个），其值为

tab:“five”

，我需要过滤并映射出所有具有属性

类别：“food”

。或者单击值为“六”的选项卡，仅映射出具有“饮料”类别的产品。我希望你能理解这个问题，我提前感谢大家

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}来自“React”；
从“react native”导入{View，Dimensions，TouchableOpacity，FlatList，Text}；
从“本机库”导入{Container，Content，List}；
从“mobx react”导入{observer，inject}；
从“../../components/Header/index.js”导入主题标头；
从“../../components/SaleTumb/index.js”导入SaleTumb；
从“../../components/SaleTitle/index.js”导入SaleTitle；
从“../../components/Footer”导入MyFooter；
从“/styles.js”导入样式；
var deviceWidth=Dimensions.get（“窗口”）.width；
var deviceHeight=尺寸。获取（“窗口”）。高度；
@注入（“产品”）
@观察者
类产品扩展组件{
render（）{
常量导航=this.props.navigation；
var dataSaleThumb=[
{
id:1，
ImageSaleTumb:require（“../../../assets/p1.jpg”），
文本：“ABCDFG”，
标签：“一”
},
{
id:2，
ImageSaleTumb:require（“../../../assets/p2.jpg”），
文本：“ABCDFG”，
标签：“两个”
},
{
id:3，
ImageSaleTumb:require（“../../../assets/p3.jpg”），
文本：“ABCDFG”，
标签：“三”
},
{
id:4，
ImageSaleTumb:require（“../../../assets/p4.jpg”），
文本：“ABCDFG”，
标签：“四”
},
{
id:5，
ImageSaleTumb:require（“../../../assets/p5.jpg”），
文本：“ABCDFG”，
标签：“五”
},
{
id:6，
ImageSaleTumb:require（“../../../assets/p6.jpg”），
文本：“ABCDFG”，
标签：“六”
},
{
id:7，
ImageSaleTumb:require（“../../../assets/p7.jpg”），
文本：“ABCDFG”，
标签：“七”
},
{
id:8，
ImageSaleTumb:require（“../../../assets/p8.jpg”），
文本：“ABCDFG”，
标签：“八”
}
];
返回(
(
)}
/>
);
}
}
导出默认观察者（产品）；

对于任何想知道的人，我在一位表兄的帮助下找到了一个解决方案

首先，我们在产品屏幕的DataSaleTumb对象中添加类别道具：

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"
      }
...

<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}
                 />
               )}
             />

然后，我们在产品屏幕中声明一个onPress函数：

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"
      }
...

<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}
                 />
               )}
             />

(
导航（“ProductCatalog”，{categoryId:categoryId}）
导航={navigation}
块高度={deviceHeight/3-45}
blockWidth={deviceWidth/3-10}
saleData={item.item.text}
imageSource={item.item.ImageSaleTumb}
categoryId={item.item.category}
/>
)}
/>

其中ProductCatalog（您可以随意称呼它）是具有特定类别的产品将呈现的屏幕。之后，在ProductCatalog屏幕中，您可以使用如下IF语句映射特定项目：

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}
                  />)
              }
              }}

renderItem={item=>{
if（item.item.category==navigation.getParam（'categoryId'））{
返回(
)
}
}}

这样，当您按下特定选项卡时，它将道具

类别

从产品屏幕传递到产品目录屏幕。因此，现在如果我选择选项卡1，我将只获得具有

类别的产品：“饮料”

，它们将显示在ProductCatalog屏幕中，在这种情况下，

cola

和

fanta

希望我帮助了别人，干杯