我目前正在试用一个PokeAPI的项目，并且已经使用his guide进行了帮助，但是在useEffect中调用该函数时，无法摆脱该函数迭代两次的问题。
当我在useEffect中使用getAllPokemons运行以下代码时

const PokeListPage = () => {
  const [layoutToggle, setLayoutToggle] = useState(false);

  const [allPokemons, setAllPokemons] = useState([]);
  const [loadPoke, setLoadPoke] = useState(
    "https://pokeapi.co/api/v2/pokemon?limit=20"
  );

  useEffect(() => {
    getAllPokemons();
    console.log(allPokemons);
  }, []);

  const getAllPokemons = async () => {
    const res = await fetch(loadPoke);
    const data = await res.json();
    setLoadPoke(data.next);

    function createPokemonObject(result) {
      result.forEach(async (pokemon) => {
        const res = await fetch(
          `https://pokeapi.co/api/v2/pokemon/${pokemon.name}`
        );
        const data = await res.json();
        setAllPokemons((currentList) => [...currentList, data]);
      });
    }
    createPokemonObject(data.results);
    console.log(allPokemons);
  };

我得到了所有口袋妖怪中前20个对象的双重对象。
enter image description here
但是当我删除这个函数并使用一个按钮来触发这个函数时，它的行为和预期的一样。这意味着这个函数用每个口袋妖怪一个对象填充allPokemon数组。
enter image description here
我已经尝试了从其他存储库复制整个文件的一切方法，并且我不知道我已经遵循了不同的教程，但问题仍然存在。有人知道为什么吗？