Question

我的React应用程序中有一个带有食谱的对象，我试图根据单击的成分过滤器进行过滤。每个食谱都有一个JSON字符串，其中填充了食谱（请参见下面的我的食谱对象）。

当前，在成功过滤我的配方列表之后，我陷入了困境，但是最后得到的是空对象列表和正确过滤的配方对象。

我不知何故需要删除或减少这些空对象（请参见下面的徒劳尝试）。

const filteredArray = this.state.recipes.map(recipe => {
    const ingredients = JSON.parse(recipe.ingredients);
    const filtered = ingredients.filter(ingredient => selectedFilters.includes(ingredient.id))
    .reduce(() => {
        return recipe;
    }, {});
});

下面是我的this.state.recipes对象的示例：

{
    id: 42
    image: "/path/to/image.png"
    ingredients: "[{"id": 192, "name": "Cachaça"},{"id": 243, "name": "Sugar"},{"id": 27, "name": "Lime"},{"id": 28, "name": "Icecubes"}]"
    name: "Caipirinha"
    short: "short description"
},
{
    id: 43
    image: "/path/to/image.png"
    ingredients: "[{"id": 192, "name": "Cachaça"},{"id": 33, "name": "Espresso"},{"id": 243, "name": "Sugar"},{"id": 27, "name": "Lime"},{"id": 28, "name": "Icecubes"}]"
    name: "Caipirinha coffee"
    short: "short description"
}

Answer 1

尝试一下：

this.state.recipes.filter(recipe => {
  const ingredients = JSON.parse(recipe.ingredients);

  return ingredients.findIndex(ingredient => selectedFilters.includes(ingredient.id)) !== -1;
});

基于JSON字符串子项的过滤器列表

1 个答案: