过滤数组以删除反应中的过滤对象

Question

目标是如果用户单击输入，则具有捕获的口袋妖怪的数组，如果用户取消单击输入，则具有未捕获的口袋妖怪数组。我已经设法在不再捕获宠物小精灵并将其放在未捕获的数组中时过滤掉它，但我似乎无法从旧捕获的数组中删除该宠物小精灵。 例如。如果我单击“bulbasaur”、“charmender”、“squirtle”，我会将它们全部放入捕获的数组中。如果我然后删除其中一个，我会正确地在未捕获的数组中获得删除的一个，但我似乎无法从先前捕获的数组中删除它。

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import PokemonIcon from "./PokemonIcon";

const PokemonCard = ({ pokemon, capturedPkm, setCapturedPkm, notCapturedPkm, setNotCapturedPkm }) => {
    const [label, setLabel] = useState('Not captured')

    const toggleCaptured = (checked, id) => {
        const pokemonName = { id: pokemon.id, name: pokemon.name }

        if (checked && id === pokemon.id) {
            setCapturedPkm([...capturedPkm, pokemonName])
            setLabel('Captured!')
        } else {
            setLabel('Not captured!')
            setNotCapturedPkm([...notCapturedPkm, pokemonName])
            if (checked === false) {
                let newArr = [...capturedPkm]
                let pkmRemoved = newArr.filter((el, i) => el.id === id)
                let newArrPkm = newArr.splice(pkmRemoved, 1)
                console.log('newArr',newArrPkm, 'pkmRemoved', pkmRemoved)
                setCapturedPkm(newArrPkm)
            }
        }

    }
    useEffect(() => {
        console.log('captured', capturedPkm, 'not captured', notCapturedPkm)
    }, [capturedPkm, notCapturedPkm])

    return (
        <>
            <div
                className="pokemon-card"
                style={{
                    height: "250px",
                    maxWidth: "250px",
                    margin: "1rem",
                    boxShadow: "5px 5px 5px 4px rgba(0, 0, 0, 0.3)",
                    cursor: "pointer",
                }}
            >
                <Link
                    to={{ pathname: `/pokemon/${pokemon.id}` }}
                    style={{ textDecoration: "none", color: "#000000" }}
                    state={{ pokemon: pokemon, capturedPkm }}
                >
                    <div
                        style={{
                            padding: "20px",
                            display: "flex",
                            justifyContent: "center",
                            alignItems: "center",
                        }}
                    >
                        <PokemonIcon img={pokemon.sprites?.['front_default']} />
                    </div>
                </Link>
                <div style={{ textAlign: "center" }}>
                    <h1>{pokemon.name}</h1>
                    <label>
                        <input type="checkbox"
                            defaultChecked={false}
                            value={pokemon.name}
                            onChange={(e) => toggleCaptured(e.target.checked, pokemon.id)} />
                        <span style={{ marginLeft: 8, cursor: 'pointer' }}>
                            {label}
                        </span>
                    </label>
                </div>
            </div>
            <div></div>
        </>
    );
};

export default PokemonCard;

Answer 1

我猜你忘了更新 notCapturedPkm 数组。你可以试试这样的：

if (checked && id === pokemon.id) {
    setCapturedPkm([...capturedPkm, pokemonName])
    // Update this array, by removing the selected pokemon
    setNotCapturedPkm([...notCapturedPkm.filter(pkm => pkm.id !== pokemon.id)])
    setLabel('Captured!')
}