仅使用某些道具映射数组

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 => {

  return <div>{rec}</div>

})

您首先过滤数组，然后创建食物或饮料列表