从映射的 url 中仅提取一个值 return

Question

我正在提升状态，以便比较单个 pokemonCard 和被点击的卡片之间的 id，并使其只有被点击的卡片才会从 'captured' 变为 'not captured'.

当我尝试从映射的 url 中获取单个 pokemonCard 时，我目前获得了所有卡片。我想要的基本上是 setPokemonCard(res[0]) 但当然 0 需要是动态的。我怎样才能做到这一点？

警告：Pokedex 和 PokemonCard 目前仍然有我一直在提升的部分代码（比如获取和 url），以便我可以看到发生了什么。

import Header from './components/Header';
import Footer from './components/Footer';
import Pokedex from './pages/Pokedex';
//import PokemonCard from './components/PokemonCard'
import Pokemon from './pages/Pokemon';
import Dropdown from './components/Dropdown';
import { useState, useEffect } from 'react';
import { Routes, Route, BrowserRouter as Router } from 'react-router-dom';
import { PokemonContext } from './context/PokemonContext'

function App() {
  const [pokemons, setPokemons] = useState([]);
  const [captured, setCaptured] = useState(false)
  const URL = 'https://pokeapi.co/api/v2/pokemon/?limit=151';
  const [pokemonCard, setPokemonCard] = useState([])
  const pokCardURL = pokemons.map(pokemon => pokemon.url)
  // console.log(pokCardURL)
  //console.log(pokemons)

  const fetchingPokemons = async () => {
    const res = await fetch(URL);
    const data = await res.json();
    // console.log(data)
    setPokemons(data.results)
  }

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

  const fetchingPokemonCard = async () => {
    //const res = await fetch(pokCardURL);
    const res = await Promise.all(pokCardURL.map(url => fetch(url).then((res)=> res.json())));
    //const data = await res.json();

    setPokemonCard(res[0])
  }

  useEffect(() => {
    fetchingPokemonCard()

  }, [pokCardURL])

  //console.log(pokemonCard)


  const toggleCaptured = () => {
    console.log(pokemonCard) //compare pokemonCard.id === card clicked
  }

  //const toggleCaptured = () => setCaptured(captured => !captured);

  const providerValue = {
    pokemons,
    captured,
    toggleCaptured,
  }

  return (
    <PokemonContext.Provider value={providerValue}>
      <Router>
        <Header />
        <Dropdown />
        <main className='main'>
          <Routes>
            <Route exact path="/" element={<Pokedex />} />
            <Route path="/pokemon/:id" element={<Pokemon />} />
          </Routes>
        </main>
        <Footer />
      </Router>
    </PokemonContext.Provider>
  )
}

export default App;

import React, { useState, useEffect } from 'react'
import PokemonCard from '../components/PokemonCard';
import { useContext } from 'react';
import { PokemonContext } from '../context/PokemonContext';

const Pokedex = () => {
const {pokemons} = useContext(PokemonContext)
    // const [pokemons, setPokemons] = useState([]);
    //console.log(captured)

    // const URL = 'https://pokeapi.co/api/v2/pokemon/?limit=151';

    // const fetchingPokemons = async () => {
    //     const res = await fetch(URL);
    //     const data = await res.json();
    //     // console.log(data)
    //     setPokemons(data.results)
    // }

    // useEffect(() => {
    //     fetchingPokemons()
    // }, [URL])

    return (
        <>
            {pokemons.map((pokemon) => {
                // console.log(pokemon)
                return (
                    <>
                        <div style={{ width: '20%' }} key={pokemon.name}>
                            <PokemonCard
                                pokemon={pokemon}
                                name={pokemon.name}
                                url={pokemon.url}
                                key={pokemon.name}
                            />

                        </div>
                    </>
                )
            })}
        </>
    )
}

export default Pokedex

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

const PokemonCard = (props) => {
    const { url } = props
    const { captured, toggleCaptured } = useContext(PokemonContext)
    //console.log(pokemonCard)
    const URL = url
     const [pokemonCard, setPokemonCard] = useState([])
    //   const [captured, setCaptured] = useState(false)
    //  const [filteredPokemons, setFilteredPokemons] = useState([])

    //  const getFilteredPokemon = (id) => {
    //      if(captured) {
    //          filteredPokemons.push(pokemonCard)
    //          //setFilteredPokemons([...filteredPokemons, filteredPokemons])
    //         console.log(filteredPokemons)
    //         }
    //     setFilteredPokemons(pokemonCard.id === id)
    //     console.log(filteredPokemons)
    // }


    //  const toggleCaptured = () => setCaptured(captured => !captured);


    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, captured }} style={{ textDecoration: 'none', color: '#000000' }}>
                    <div style={{ padding: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center' }} >
                        {/* <PokemonIcon img={pokemonCard.sprites?.['front_default']} /> */}
                        <img style={{
                            height: '100px',
                            width: '100px',
                        }} src={pokemonCard.sprites?.['front_default']} alt='pokemon' />
                    </div>
                </Link>
                <div style={{ textAlign: 'center' }}>
                    <h1 >{pokemonCard.name}</h1>
                    <label >
                        <input
                            type='checkbox'
                            captured='false'
                            onChange={toggleCaptured}
                        />
                        <span style={{ marginLeft: 8 }}>
                            {captured === false ? 'Not captured!' : 'Captured!'}</span>

                    </label>
                </div>
            </div>
            <div>
            </div>
        </>
    )
}

export default PokemonCard

Answer 1

在您的 fetchingPokemonCard 中，只需过滤 res 以匹配您的 pokemonCard.id。我不知道你的反应是什么样的，所以我不能为你写过滤器。

从映射的 url 中仅提取一个值 return

Fetch to return only one value from mapped urls

fetch

reactjs

promise.all