reactjs - Redux 不会按 ID 从状态数组中删除项目
问题描述
我不明白这段代码有什么问题,我传入了 ID 并过滤掉了状态,但它只是不会删除,无法弄清楚,希望得到一些帮助。片:
import { createSlice } from "@reduxjs/toolkit";
const movieSlice = createSlice({
name: "movie",
initialState: { favoriteMovies: [] },
reducers: {
addMovie: (state, action) => {
state.favoriteMovies = [...state.favoriteMovies, action.payload];
},
removeMovie: (state, action) => {
state.favoriteMovies = state.favoriteMovies.filter(
(movie) => movie.imdbID !== action.payload
);
},
},
});
export const { addMovie, removeMovie } = movieSlice.actions;
export const selectMovie = (state) => state.movie.favoriteMovies;
export default movieSlice.reducer;
调度:
const MovieDetail = ({ movie }) => {
const [isFavorite, setIsFavorite] = useState(false);
const dispatch = useDispatch();
const imdbID = movie.imdbID;
const handleAddFavorite = () => {
dispatch(addMovie({ movie }));
setIsFavorite(true);
};
const handleRemoveFavorite = () => {
dispatch(removeMovie({ imdbID }));
console.log(imdbID);
setIsFavorite(false);
};
它什么时候应该删除,然后再次添加。我传入的 id 是正确的。
解决方案
您发送的方式
dispatch(removeMovie({ imdbID }));
imdbID
最终会变成action.payload.imdbID
.
所以你需要访问它,或者像这样发送
dispatch(removeMovie(imdbID));
推荐阅读
- c# - UWP 扩展到标题栏 - 默认标题栏转换后退按钮
- pyspark-sql - Pyspark IndentationError:需要一个缩进块
- c# - 在启动期间验证 ASP.NET Core 选项
- python - 如何定期自动运行 Jupyter Notebook 单元
- ios - 两个不同登录名的 UIWebView
- php - 按钮仅适用于第一行
- angular - 同时测试 Angular 库,包括库组件和示例应用程序
- apache - 如何在支持 SSL 的 Amazon EC2 单实例上托管多个网站?
- react-native - 在标签离开时对本机标签重置做出反应
- c# - 我已经使用了参数,但我很难用多用户登录