仅使用某些道具映射数组

Question

第一次海报。我目前正在使用 MobX 学习 React-Native，我想知道，在单击按钮显示可用产品后，仅使用某些道具映射数组的最佳方法是什么。例如，您有 2 个选项卡，一个用于食物，一个用于饮料，如果我单击饮料按钮，我只想映射出具有“饮料”值的项目，从而忽略其他两个，在这种情况下，我只会得到芬达和可乐。提前致谢。

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;

Answer 1

我认为它看起来像这样products.filter(object => object.category === "beverage").map(rec => {&nbsp; return <div>{rec}</div>})您首先过滤数组，然后创建食物或饮料列表