从 reactjs 和 redux 中的数据中删除项目

Question

我正在和 oMdb 一起练习 React redux api。我有一种从 api 搜索电影并将它们添加到收藏夹列表的方法。当我想从收藏夹列表中删除一部电影时，问题就来了。

这里给大家展示reducer的代码

const initialState = {
    favoriteMovies: [],
}


const reducer = (state = initialState, action) => {

    switch (action.type) {
        case "ADD_MOVIE":
            return {
                ...state,
                favoriteMovies: [...state.favoriteMovies, action.payload]
            }
        case "DELETE_MOVIE":
            return {
                // ...state, favoriteMovies: [...state.favoriteMovies.slice(action.payload,+1),...state.favoriteMovies.slice(0, action.payload)], 
                ...state, favoriteMovies: [...state.favoriteMovies.filter((favoriteMovie)=>favoriteMovie !==action.payload), console.log("state.favoriteMovies", state.favoriteMovies)]

            }
        default:
            return state;
    }
}

export default reducer;

(add 方法完美运行，但是 none 我尝试从收藏夹列表中删除的两个方法都起作用了。slice 方法 returns 只有我想删除的项目，而过滤器 方法告诉我收藏夹未定义。）

在这里，我向您展示我执行操作的沙盒

import React, { useEffect, useState } from "react";
import SearchSection from "./SearchSection";
import Carousel from "../components/carousels/Carousel";
import CarouselItem from "../components/carousels/CarouselItem";
import { useDispatch, useSelector } from "react-redux";
import "../assets/styles/Global.css"
import { deleteMovie } from "../store/actions";

const Sandbox = () => {
    const favoriteMovies = useSelector(state => state.favoriteMovies)
    const dispatch = useDispatch()

    return (
        <div className="sandbox">
            <SearchSection />
            <Carousel>
                {
                    favoriteMovies.map(favorites =>
                        <CarouselItem
                            title={favorites.Title}
                            image={favorites.Poster}
                            alt={favorites.title}
                            year={favorites.Year}
                            click={() => { dispatch(deleteMovie(favorites)) }}
                        />
                    )}
            </Carousel>
        </div>
    );
};

export default Sandbox;

提前致谢

Answer 1

您可以尝试像下面这样放置，您不必使用 ... 和 de-sturcture 数组

favoriteMovies: state.favoriteMovies.filter((favoriteMovie)=>favoriteMovie !==action.payload)

Answer 2

例如，您应该过滤 id 而不是整个对象。当你比较对象时，它会通过浅引用进行比较，它们会有所不同。

favoriteMovies: state.favoriteMovies.filter((favoriteMovie) => favoriteMovie.id !== action.payload.id)]

Answer 3

你也可以采用这种方法

const newMovies = [...state.movies]

const indexOfMovie = state.movies.findIndex(movie => movie.id === action.payload.id)

if(indexOfMovie !== -1) {
newMovies.splice(indexOfMovie, 1)
} else {
return {...state}
}

set the state of the new movies

return {
..state, 
favoriteMovies: newMovies
}

从 reactjs 和 redux 中的数据中删除项目

Delete item from data in reactjs and redux

filter

reactjs

react-redux

react-hooks

omdbapi