如何解决删除数组ReactJS中的一项React Hooks和Redux
我正在使用MERN堆栈创建食谱应用程序。
我遇到的问题是试图删除配方对象内部数组中的成分。我的食谱对象看起来像这样:
每种成分旁边都有一个叉,允许您单击以将其删除。
<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,因为我已经可以使用reducer删除整个配方:
case DELETE_RECIPE:
return {
...state,recipes: state.recipes.filter(recipe => recipe._id !== action.payload),loading: false
};
但是我如何才能针对一种特定成分?
任何建议将不胜感激。
解决方法
我为您的代码问题添加了注释)
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,ingredient: query }
]
}));
};
const removeIngredient = data => {
const results = addIngredients.ingredients.filter(
e => e.ingredients !== data
);
setIngredients(
{
...addIngredients,ingredients: results
});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。