我收到一個錯誤：無法讀取未定義的屬性“推送”

Question

我目前正在開發一個創建配方應用程序的個人項目。 當我啟動一個開發服務器時，我收到一個錯誤：成分.js:26 未捕獲的類型錯誤：無法讀取未定義的屬性“推送”

我想，recipe.ingredients 有問題，但是當我嘗試調整它時，我仍然無法解決它。 任何人都可以看看我的源代碼，一個文件叫做成分.js

 import uuidv4 from 'uuid/v4' import { getRecipe, saveRecipe } from './recipes' const createIngredients = (recipeId, text) => { const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) recipe.ingredients.push({ id: uuidv4(), text, completed: false }) saveRecipe() } const removeIngredients = (id, recipeId) => { const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) const ingredients = recipe.ingredients const ingredientIndex = ingredients.find((ingredient) => ingredient.id === id) if (ingredientIndex > -1) { ingredients.splice(ingredientIndex, 1) } } // Toggle the completed value for a given ingredient const toggleIngredients = (id, recipeId) => { const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) const ingredients = recipe.ingredients const ingredient = ingredients.find((ingredient) => ingredient.id === id) if (ingredient) { ingredient.completed = !ingredient.completed saveRecipe() } } // render the ingredients const renderIngredients = (recipeId) => { const ingredientEl = document.querySelector('#ingredients') const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) const ingredients = recipe.ingredients ingredientEl.innerHTML = '' if (ingredients.length > 0) { ingredients.forEach((ingredient) => { ingredientEl.appendChild(generateIngredientDOM(ingredient)) }) } else { const messageEl = document.createElement('p') messageEl.classList.add('empty-message') messageEl.textContent = 'No ingredients to show' ingredientEl.appendChild(messageEl) } saveRecipe() } const generateIngredientDOM = (ingredient) => { const ingredientEl = document.createElement('label') const containerEl = document.createElement('div') const ingredientText = document.createElement('span') const checkbox = document.createElement('input') const removeButton = document.createElement('button') const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id) // Setup ingredient checkbox checkbox.setAttribute('type', 'checkbox') checkbox.checked = ingredient.completed containerEl.appendChild(checkbox) checkbox.addEventListener('change', () => { toggleIngredients(ingredient.id, recipe.id) renderIngredients(recipe.id) }) // Setup the ingredient text ingredientText.textContent = ingredient.text containerEl.appendChild(ingredientText) // Setup container ingredientEl.classList.add('list-item') containerEl.classList.add('list-item__container') ingredientEl.appendChild(containerEl) // Setup the remove button removeButton.textContent = 'remove' removeButton.classList.add('button', 'button--text') ingredientEl.appendChild(removeButton) removeButton.addEventListener('click', () => { removeIngredients(ingredient.id, recipe.id) renderIngredients(recipe.id) }) return ingredientEl } const generateSummaryDOM = (incompleteIngredients) => { const summary = document.createElement('h2') const plural_pronoun = incompleteIngredients.length <= 1 ? 'is' : 'are' const plural = incompleteIngredients.length <= 1 ? '' : 's' summary.classList.add('list-title') summary.textContent = `There ${plural_pronoun} ${incompleteIngredients.length} ingredient${plural} missing` return summary } export { createIngredients, renderIngredients, generateSummaryDOM }

如果我改變功能如下

 const createIngredients = (recipeId, text) => { const recipe = recipes.find((recipe) => recipe.id === recipeId); // Returns undefined if(recipe) recipe.ingredients.push({ id: uuidv4(), text, completed: false }) else console.log("Recipe not found"); saveRecipe() }

然后我收到另一個錯誤：Uncaught ReferenceError: recipes is not defined at createIngredients (ingredients.js:24) at HTMLFormElement。 (edit.js:29)

但是我不明白為什么，因為我將 recipes.js 導入到了 ingredients.js 中，所以它應該在那時被定義。

下面是 recipes.js 代碼

 import uuidv4 from 'uuid/v4' let recipes = [] // Get the saved data and return the value found fot the key 'recipes' in localStorage.getItem('recipes') const loadRecipe = () => { const recipesJSON = localStorage.getItem('recipes') try { return recipesJSON ? JSON.parse(recipesJSON) : [] } catch (e) { return [] } } // Save the recipes to localStorage const saveRecipe = () => { localStorage.setItem('recipes', JSON.stringify(recipes)) } const getRecipe = () => recipes const createRecipe = () => { const id = uuidv4() recipes.push({ id: id, title: '', body: '', ingredients: [] }) saveRecipe() return id } const removeRecipe = (id) => { const recipeIndex = recipes.findIndex((recipe) => recipe.id === id) if (recipeIndex > -1) { recipes.splice(recipeIndex, 1) saveRecipe() } } const updateRecipe = (id, updates) => { const recipe = recipes.find((recipe) => recipe.id === id) if (!recipe) { return } if (typeof updates.title === 'string') { recipe.title = updates.title } if (typeof updates.body === 'string') { recipe.body = updates.body } saveRecipe() return recipe } recipes = loadRecipe() export { getRecipe, createRecipe, removeRecipe, updateRecipe, saveRecipe }

Answer 1

我目前正在開發一個創建配方應用程序的個人項目。 當我啟動一個開發服務器時，我收到一個錯誤：成分.js:26 未捕獲的類型錯誤：無法讀取未定義的屬性“推送”

我想，recipe.ingredients 有問題，但是當我嘗試調整它時，我仍然無法解決它。 任何人都可以看看我的源代碼，一個文件叫做成分.js

 import uuidv4 from 'uuid/v4' import { getRecipe, saveRecipe } from './recipes' const createIngredients = (recipeId, text) => { const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) recipe.ingredients.push({ id: uuidv4(), text, completed: false }) saveRecipe() } const removeIngredients = (id, recipeId) => { const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) const ingredients = recipe.ingredients const ingredientIndex = ingredients.find((ingredient) => ingredient.id === id) if (ingredientIndex > -1) { ingredients.splice(ingredientIndex, 1) } } // Toggle the completed value for a given ingredient const toggleIngredients = (id, recipeId) => { const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) const ingredients = recipe.ingredients const ingredient = ingredients.find((ingredient) => ingredient.id === id) if (ingredient) { ingredient.completed = !ingredient.completed saveRecipe() } } // render the ingredients const renderIngredients = (recipeId) => { const ingredientEl = document.querySelector('#ingredients') const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id === recipeId) const ingredients = recipe.ingredients ingredientEl.innerHTML = '' if (ingredients.length > 0) { ingredients.forEach((ingredient) => { ingredientEl.appendChild(generateIngredientDOM(ingredient)) }) } else { const messageEl = document.createElement('p') messageEl.classList.add('empty-message') messageEl.textContent = 'No ingredients to show' ingredientEl.appendChild(messageEl) } saveRecipe() } const generateIngredientDOM = (ingredient) => { const ingredientEl = document.createElement('label') const containerEl = document.createElement('div') const ingredientText = document.createElement('span') const checkbox = document.createElement('input') const removeButton = document.createElement('button') const recipes = getRecipe() const recipe = recipes.find((recipe) => recipe.id) // Setup ingredient checkbox checkbox.setAttribute('type', 'checkbox') checkbox.checked = ingredient.completed containerEl.appendChild(checkbox) checkbox.addEventListener('change', () => { toggleIngredients(ingredient.id, recipe.id) renderIngredients(recipe.id) }) // Setup the ingredient text ingredientText.textContent = ingredient.text containerEl.appendChild(ingredientText) // Setup container ingredientEl.classList.add('list-item') containerEl.classList.add('list-item__container') ingredientEl.appendChild(containerEl) // Setup the remove button removeButton.textContent = 'remove' removeButton.classList.add('button', 'button--text') ingredientEl.appendChild(removeButton) removeButton.addEventListener('click', () => { removeIngredients(ingredient.id, recipe.id) renderIngredients(recipe.id) }) return ingredientEl } const generateSummaryDOM = (incompleteIngredients) => { const summary = document.createElement('h2') const plural_pronoun = incompleteIngredients.length <= 1 ? 'is' : 'are' const plural = incompleteIngredients.length <= 1 ? '' : 's' summary.classList.add('list-title') summary.textContent = `There ${plural_pronoun} ${incompleteIngredients.length} ingredient${plural} missing` return summary } export { createIngredients, renderIngredients, generateSummaryDOM }

如果我改變功能如下

 const createIngredients = (recipeId, text) => { const recipe = recipes.find((recipe) => recipe.id === recipeId); // Returns undefined if(recipe) recipe.ingredients.push({ id: uuidv4(), text, completed: false }) else console.log("Recipe not found"); saveRecipe() }

然后我收到另一個錯誤：Uncaught ReferenceError: recipes is not defined at createIngredients (ingredients.js:24) at HTMLFormElement。 (edit.js:29)

但是我不明白為什么，因為我將 recipes.js 導入到了 ingredients.js 中，所以它應該在那時被定義。

下面是 recipes.js 代碼

 import uuidv4 from 'uuid/v4' let recipes = [] // Get the saved data and return the value found fot the key 'recipes' in localStorage.getItem('recipes') const loadRecipe = () => { const recipesJSON = localStorage.getItem('recipes') try { return recipesJSON ? JSON.parse(recipesJSON) : [] } catch (e) { return [] } } // Save the recipes to localStorage const saveRecipe = () => { localStorage.setItem('recipes', JSON.stringify(recipes)) } const getRecipe = () => recipes const createRecipe = () => { const id = uuidv4() recipes.push({ id: id, title: '', body: '', ingredients: [] }) saveRecipe() return id } const removeRecipe = (id) => { const recipeIndex = recipes.findIndex((recipe) => recipe.id === id) if (recipeIndex > -1) { recipes.splice(recipeIndex, 1) saveRecipe() } } const updateRecipe = (id, updates) => { const recipe = recipes.find((recipe) => recipe.id === id) if (!recipe) { return } if (typeof updates.title === 'string') { recipe.title = updates.title } if (typeof updates.body === 'string') { recipe.body = updates.body } saveRecipe() return recipe } recipes = loadRecipe() export { getRecipe, createRecipe, removeRecipe, updateRecipe, saveRecipe }