为什么我的react函数会迭代两次？

9 浏览
0 Comments

为什么我的react函数会迭代两次？

我目前正在尝试使用PokeAPI进行一个项目。我参考了这个指南来帮助我。但是我无法解决在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);
  };

我会在allPokemons中得到前20个对象的重复。请参考输出结果：

查看图片描述

但是当我移除函数并使用按钮触发函数时，它的行为符合预期。这意味着该函数每个pokemon只会在allPokemon数组中填充一个对象。请参考输出结果。

查看图片描述

我已经尝试了从其他代码库复制整个文件，并准确地按照不同的教程进行操作，但问题仍然存在。有人知道为什么吗？

0

1 答案

0 Comments

为什么我的React函数会迭代两次？

问题出现的原因是因为将应用程序渲染到一个React.StrictMode组件中，该组件会以一种特定的方式运行函数和方法两次，以帮助你检测意外的副作用。由于副作用是状态更新，这会触发重新渲染。

为了解决这个问题，可以使用useEffect来在组件挂载时只运行一次效果。

0