使用过滤器删除数组的最后一项不会重新渲染反应组件

Question

在减速器中，我使用过滤器方法在用户单击时从localStorage删除电影。所有的电影都从localStorage中删除，除了最后一个，它将从我的状态中删除，但不会从localStorage中删除。似乎问题来自于这样一个事实，即当最后一项从状态中删除时，我的组件不会重新渲染，因此我的useEffect不会被触发。只有当我在/观看路线上时才会出现错误，如果我在"/"，我可以从LS中删除所有项目。

MoviesContext.js:
const initialState = {
movies: [],
favoriteMovies: JSON.parse(localStorage.getItem('favorite')) || [],
watchedMovies: JSON.parse(localStorage.getItem('watched')) || [],
}
MoviesReducer.js
case 'DELETE_MOVIE_FROM_WATCHED':
return {
...state,
watchedMovies: state.watchedMovies.filter(
item => item.id !== action.payload
),
}
useMovies.js:
const { favoriteMovies, watchedMovies, dispatch } = useContext(MoviesContext)
const deleteMovieFromLS = async (id) => {
dispatch({ type: 'DELETE_MOVIE_FROM_WATCHED', payload: id })
}
useEffect(() => {
localStorage.setItem('watched', JSON.stringify(watchedMovies))
}, [watchedMovies])

Answer 1

它不会更新状态，因为对象引用是相同的。您正在将watchedMovies设置为watchedMovies

[…state.watchedMovies]

或JSON.parse(JSON.stringify(state.watchedMovies))应该可以工作

试

MoviesContext.js:
const initialState = {
movies: [],
favoriteMovies: JSON.parse(localStorage.getItem('favorite')) || [],
watchedMovies: JSON.parse(localStorage.getItem('watched')) || [],
}
MoviesReducer.js
case 'DELETE_MOVIE_FROM_WATCHED':
return {
...state,
watchedMovies: [...state.watchedMovies].filter(
item => item.id !== action.payload
),
}
useMovies.js:
const { favoriteMovies, watchedMovies, dispatch } = useContext(MoviesContext)
const deleteMovieFromLS = async (id) => {
dispatch({ type: 'DELETE_MOVIE_FROM_WATCHED', payload: id })
}
useEffect(() => {
localStorage.setItem('watched', JSON.stringify(watchedMovies))
}, [watchedMovies])