使用数组中的 usestate 更新状态

Question

我正在尝试更新 setState 以便在 capturePokemon 数组中包含 ['bulbasaur', 'ivisaur', ...] 和所有点击的 pokemon，但到目前为止我只能设法改变同一个数组?从 console.log 中，如果我点击不同的口袋妖怪，我只会在 capturePkm 数组中得到点击的口袋妖怪。我做错了什么？

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

const PokemonCard = (props) => {
    const { url } = props
    const URL = url
    const [pokemonCard, setPokemonCard] = useState([])
    const [capturedPkm, setCapturedPkm] = useState([])
    const [notCapturedPkm, setNotCapturedPkm] = useState([])
    const [label, setLabel] = useState('Not captured')

    const toggleCaptured = (checked, id) => {
        const currentChecked = [...capturedPkm];
        if (checked) {
            currentChecked.push(pokemonCard.name)
            console.log(currentChecked)

            setLabel('Captured!')

        } else {
            setLabel('Not captured!')

        }

        setCapturedPkm([...capturedPkm, currentChecked]);
        console.log('captured', capturedPkm,)

    }

    const fetchingPokemonCard = async () => {
        const res = await fetch(URL);
        const data = await res.json();
        //console.log(data)
        setPokemonCard(data)
    }

    useEffect(() => {
        fetchingPokemonCard()
    }, [URL])

    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/${pokemonCard.id}` }}
                    state={{ pokemon: pokemonCard, capturedPkm }}
                    style={{ textDecoration: 'none', color: '#000000' }}>
                    <div
                        style={{ padding: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center' }} >
                        <PokemonIcon img={pokemonCard.sprites?.['front_default']} />
                    </div>
                </Link>
                <div style={{ textAlign: 'center' }}>
                    <h1 >{pokemonCard.name}</h1>
                    <label >
                        <input
                            type='checkbox'
                            defaultChecked={false}
                            onChange={(e) => toggleCaptured(e.target.checked, pokemonCard.id)}
                        />
                        <span style={{ marginLeft: 8, cursor: 'pointer' }}>
                            {label}
                        </span>
                    </label>
                </div>
            </div>
            <div>
            </div>
        </>
    )
}

export default PokemonCard

Answer 1

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

const PokemonCard = (props) => {
    const { url } = props
    const URL = url
    const [pokemonCard, setPokemonCard] = useState([])
    const [capturedPkm, setCapturedPkm] = useState([])
    const [notCapturedPkm, setNotCapturedPkm] = useState([])
    const [label, setLabel] = useState('Not captured')

    const toggleCaptured = (checked, id) => {
        setCapturedPkm(prevState => {
            const newChecked = [...prevState];
            if (checked) {
                newChecked.push(pokemonCard.name)
                console.log(currentChecked)
                setLabel('Captured!')
    
            } else {
                setLabel('Not captured!')
            }
            return newChecked;
        });
    }

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

    const fetchingPokemonCard = async () => {
        const res = await fetch(URL);
        const data = await res.json();
        //console.log(data)
        setPokemonCard(data)
    }

    useEffect(() => {
        fetchingPokemonCard()
    }, [URL])

    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/${pokemonCard.id}` }}
                    state={{ pokemon: pokemonCard, capturedPkm }}
                    style={{ textDecoration: 'none', color: '#000000' }}>
                    <div
                        style={{ padding: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center' }} >
                        <PokemonIcon img={pokemonCard.sprites?.['front_default']} />
                    </div>
                </Link>
                <div style={{ textAlign: 'center' }}>
                    <h1 >{pokemonCard.name}</h1>
                    <label >
                        <input
                            type='checkbox'
                            defaultChecked={false}
                            onChange={(e) => toggleCaptured(e.target.checked, pokemonCard.id)}
                        />
                        <span style={{ marginLeft: 8, cursor: 'pointer' }}>
                            {label}
                        </span>
                    </label>
                </div>
            </div>
            <div>
            </div>
        </>
    )
}

export default PokemonCard