删除数组ReactJS(React Hooks和Redux)中的一项

Question

我正在使用MERN堆栈创建一个配方应用程序。

我遇到的问题是试图删除配方对象中数组中的一种成分。我的配方对象看起来像这样：

MongoDB配方对象

每种成分旁边都有一个十字架，你可以点击它来去除。

<div>
<ol className='pad5px20px'>
{addIngredients.ingredients.map(data => (
<div className='ingredient-item padTB5px' key={data}>
<li>{data}</li>
<span onClick={() => removeIngredient(data)}>
<i className='fas fa-trash'></i>
</span>{' '}
      
</div>
))}
</ol>
</div>

addIngredients和removeIngredient功能如下所示：

const addIngredient = e => {
e.preventDefault();
if (query === '') return;
addIngredients.ingredients.push(query);
setIngredients(addIngredients);
setRecipe(prevState => ({
...prevState,
ingredients: [
...prevState.ingredients,
{ id: Date.now(), ingredient: query }
]
}));
};
const removeIngredient = data => {
const results = addIngredients.ingredients.filter(
e => e.ingredients !== data
);
setIngredients(
addIngredients.ingredients.filter(e => e.ingredients !== data)
);
};

每次我从清单中删除一种成分时，我都会收到一个错误，上面写着"；TypeError:无法读取未定义的"的属性"map"；。

我这里有什么东西不见了吗？在过去的几个月里，我一直在开发这个应用程序，现在我被这个特定的部分卡住了。我认为一个更好的方法是使用Redux，因为我已经能够使用减缩器删除整个配方：

case DELETE_RECIPE:
return {
...state,
recipes: state.recipes.filter(recipe => recipe._id !== action.payload),
loading: false
};

但是我怎样才能针对一种特定的成分呢？

如有任何建议，我们将不胜感激。

Answer 1

我为您的代码问题添加了注释(

const addIngredient = e => {
e.preventDefault();
if (query === '') return;
***STATE MUTATION***
addIngredients.ingredients.push(query);
setIngredients(addIngredients);
setRecipe(prevState => ({
...prevState,
ingredients: [
...prevState.ingredients,
{ id: Date.now(), ingredient: query }
]
}));
};
const removeIngredient = data => {
const results = addIngredients.ingredients.filter(
e => e.ingredients !== data
);
***You're adding ingredients object instead of addIngredients as you used in addIngredient method***
setIngredients(
addIngredients.ingredients.filter(e => e.ingredients !== data)
);
};

addIngredients.ingredients.filter(e => e.ingredients !== data)返回过滤成分，而不是addIngredients和过滤成分字段

应该如何

const addIngredient = e => {
e.preventDefault();
if (query === '') return;
setIngredients({
...addIngredients,
ingredients: [
...addIngredients,
query
]
});
setRecipe(prevState => ({
...prevState,
ingredients: [
...prevState.ingredients,
{ id: Date.now(), ingredient: query }
]
}));
};
const removeIngredient = data => {
const results = addIngredients.ingredients.filter(
e => e.ingredients !== data
);
setIngredients(
{
...addIngredients,
ingredients: results
});
};