Javascript 删除嵌套在对象内部的数组项

我试图根据数组中的title属性从objects数组中删除特定项。我一直遇到这样一个问题：我可以查看数组项，但无法根据remove函数中输入的参数将该项从数组中拼接出来。我只是从函数中的

else

语句返回错误消息

我尝试使用

find、forEach、findIndex

并匹配该案例，以便测试根据索引或

键“text”的文本值删除结果。在论坛建议中搜索答案之前，我把所有尝试过的功能都注释掉了。我所有的配方函数都在工作，还有我的
createComponent
函数，它向配方数组中添加了一个对象。但是我一直尝试使用的
removeingredit
功能并不是因为上面提到的问题

let recipes = []

// Read existing recipes from localStorage
const loadRecipes = () => {
    const recipesJSON = localStorage.getItem('recipes')

    try {
        return recipesJSON ? JSON.parse(recipesJSON) : []
    } catch (e) {
        return []
    } 
}

// Expose recipes from module
const getRecipes = () => recipes

const createRecipe = () => {
    const id = uuidv4()
    const timestamp = moment().valueOf()

    recipes.push({
        id: id,
        title: '',
        body: '',
        createdAt: timestamp,
        updatedAt: timestamp,
        ingredient: []
    })
    saveRecipes()

    return id
}

// Save the recipes to localStorage
const saveRecipes = () => {
    localStorage.setItem('recipes', JSON.stringify(recipes))
}

// Remove a recipe from the list
const removeRecipe = (id) => {
    const recipeIndex = recipes.findIndex((recipe) => recipe.id === id)

    if (recipeIndex > -1) {
        recipes.splice(recipeIndex, 1)
        saveRecipes()
    }
}

// Remove all recipes from the recipe array
const cleanSlate = () => {
    recipes = []
    saveRecipes()
}

const updateRecipe = (id, updates) => {
    const recipe = recipes.find((recipe) => recipe.id === id)

    if (!recipe) {
        return
    }

    if (typeof updates.title === 'string') {
        recipe.title = updates.title
        recipe.updatedAt = moment().valueOf()
    }

    if (typeof updates.body === 'string') {
        recipe.body = updates.body
        recipe.updateAt = moment().valueOf()
    }

    saveRecipes()
    return recipe
}

const createIngredient = (id, text) => {
    const recipe = recipes.find((recipe) => recipe.id === id)

    const newItem = {
        text,
        have: false
    }
    recipe.ingredient.push(newItem)
    saveRecipes()
}

const removeIngredient = (id) => {
    const ingredient = recipes.find((recipe) => recipe.id === id)
    console.log(ingredient)
    const allIngredients = ingredient.todo.forEach((ingredient) => console.log(ingredient.text))

    // const recipeIndex = recipes.find((recipe) => recipe.id === id)

    // for (let text of recipeIndex) {
    //     console.log(recipdeIndex[text])
    // }

// Attempt 3
    // if (indexOfIngredient === 0) {
    //     ingredientIndex.splice(index, 1)
    //     saveRecipes()
    // } else {
    //     console.log('error')
    // }
    // Attempt 2
    // const recipe = recipes.find((recipe) => recipe.id === id)
    // const ingredients = recipe.todo 
    // // let newItem = ingredients.forEach((item) => item)

    // if (ingredients.text === 'breadcrumbs') {
    //     ingredients.splice(ingredients, 1)
    //     saveRecipes()
    // }
    // Attempt 1
    // const ingredientName = ingredients.forEach((ingredient, index, array) => console.log(ingredient, index, array))
    // console.log(ingredientName)

    // const recipeIndex = recipes.findIndex((recipe) => recipe.id === id)

    // if (recipeIndex > -1) {
    //     recipes.splice(recipeIndex, 1)
    //     saveRecipes()
    // }
}

recipes = loadRecipes()

输出

{id: "ef88e013-9510-4b0e-927f-b9a8fc623450", title: "Spaghetti", body: "", createdAt: 1546878594784, updatedAt: 1546878608896, …}
recipes.js:94 breadcrumbs
recipes.js:94 noodles
recipes.js:94 marinara
recipes.js:94 meat
recipes.js:94 ground beef
recipes.js:94 milk

因此，我能够查看上面打印的输出，并查看
成分
数组中的每个项目，但尝试根据
索引
编号或
键
拼接项目对我来说不适用于我已经尝试过的函数和在Stackoverflow上找到的关于对象的信息，数组和到目前为止的拼接方法。
如果我理解正确（在阅读代码中注释掉的尝试之后），您正在尝试从配方中删除与传递给
removeingredit（）
函数的
id
对应的“面包屑”成分

在这种情况下，也许您可以采取稍微不同的方法，通过以下方法从配方
todo
数组中删除成分

您可以按以下方式使用
filter（）
，通过以下过滤逻辑从
todo
数组中“过滤”（即删除）“面包屑”成分：

// Keep any ingredients that do not match ingredient (ie if ingredient
// equals "breadcrumbs")
todo.filter(todoIngredient => todoIngredient !== ingredient) 

您可以考虑修改<代码> ReleFieldTeNe（）/Case>函数；p>

向函数参数添加额外的
成分
参数。这允许您指定要从对应于
recipeId

并介绍了
filter（）
思想，如下所述：



现在，当您为每个成分引入“删除”按钮时，您将调用
removeingredit（）
，如下所示：

var recipeId = /* got id from somewhere */
var ingredientText = /* got ingredient from somewhere */

removeIngredient( recipeId, ingredientText );

希望这有帮助removeCredit

功能实现的目标。我可能应该提到这一点。@Ang不客气-您是否希望我更新答案，以便通过

removeingredit（）

删除不同的成分？是的，丹尼！谢谢。没问题@Ang！我刚刚更新了答案-这有用吗？是的，先生！我感谢你的帮助！我将此标记为已解决。

var recipeId = /* got id from somewhere */
var ingredientText = /* got ingredient from somewhere */

removeIngredient( recipeId, ingredientText );