使用 PokeApi 将道具传递给 children

Question

我用 PokeApi 构建小型 React 应用程序。所以，我想创建 Pokedex 应用程序。我的问题是 pokemon.name 没有显示在屏幕上。我给你看。所以，当我点击 pokeCard 时，在 SelectedPokemon 道具中保存了点击的 pokeCard 的 id。但是，我不知道为什么，当我获取和传递口袋妖怪道具时，在 children 的道具中我只看到口袋妖怪页面数组而不是 pokemon.name.

.

其Parent组件的代码。我想，这个问题可能在fetch中。

Parent分量

function About(props) {
  let { SelectedPokemon } = props;
  const [Pokemon, setPokemon] = useState([]);
  const [Loading, setLoading] = useState(true);

  useEffect(() => {
    let endpointForPokemonDetails = `${API_URL}${SelectedPokemon}`;
    fetchPokemonDetails(endpointForPokemonDetails);
  });

  const fetchPokemonDetails = (endpointForPokemonDetails) => {
    fetch(endpointForPokemonDetails)
      .then((result) => result.json())
      .then((result) => {
        setPokemon([...Pokemon, result]);
      }, setLoading(false))
      .catch((error) => console.log("Error:", error));
  };

  return (
    <div
      style={{
        position: "fixed",
        top: 150,
        right: 150,
      }}
    >
      <PokemonDetails pokemon={Pokemon} />
    </div>
  );
}

其Children组件:

function PokemonDetails(props) {
  let { pokemon } = props;
  return (
    <div style={{ border: "1px solid #333", height: "300px", width: "250px" }}>
      {pokemon.name}
    </div>
  );
}

Answer 1

我解决了我的问题。

我的Pokemon是数组。所以我要遍历它。

{pokemon.map((pokemon) => ( <div key={pokemon.id}>{pokemon.name}</div> ))}

当我设置setPokemon([...Pokemon, result])时表示作为新集合执行。我设置 setPokemon([...Pokemon, result]) 并且一切正常。

使用 PokeApi 将道具传递给 children

React Pass props to children with PokeApi

javascript

rest

reactjs

react-props