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

Question

如果用户点击输入，

Objective 将有一个包含捕获的神奇宝贝的数组，如果用户取消单击输入，则有一个未捕获的神奇宝贝数组。当宠物小精灵不再被捕获时，我已经设法过滤掉它并将它放在未捕获的数组中，但我似乎无法从旧的捕获数组中删除那个宠物小精灵。例如。如果我点击“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!')
}

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

Filtering array to remove filtered object in react

filter

event-handling

reactjs

react-hooks