具有依赖数组的 UseEffect 无限循环答案

【问题标题】：UseEffect infinite loop with array of dependencies具有依赖数组的 UseEffect 无限循环
【发布时间】：2020-11-02 16:20:22
【问题描述】：

我遇到了 useEffect 和 useState 的问题。我正在尝试使用来自 api 的数据填充状态，但它会导致无限循环，即使我使用具有依赖关系的数组也是如此。当我尝试获取名称时，它会起作用。当我尝试获取数组或对象时会出现问题。

代码如下：

      const id = props.match.params.id;
      const [pokemon, setPokemon] = useState({});
    
      useEffect(() => {
        let cancelRequest;
        axios
      .get(`https://pokeapi.co/api/v2/pokemon/${id}`, {
        cancelToken: new axios.CancelToken(
          (cancel) => (cancelRequest = cancel)
        ),
      })
      .then((res) => {
        setPokemon(res.data);
        console.log(pokemon);
      })
      .catch((err) => {
        console.log(`ERROR:: ${err.message}`);
      });
      return () => {
        cancelRequest();
     };
    }, [id, pokemon]);

这里是来自控制台的数据示例：

{abilities: Array(2), base_experience: 64, forms: Array(1), game_indices: Array(20), height: 7, …}

谢谢。

【问题讨论】：

您在部门中有pokemon，这意味着每次更改pokemon都会调用useEffect。当您被称为 setPokemon 每个 useEffect 并带有新的参考时，就会发生这种情况。只留下[id] 在部门中。

标签： reactjs axios use-effect

【解决方案1】：

不要在useEffect里面使用axios请求。

为此创建另一个函数并使用useCallback。例如：

const fetchPokemon = useCallback(() => {
 axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`)
   .then((res) => {
     setPokemon(res.data);
   })
   .catch(() => {}
}, [id])


useEffect(() => {
 fetchPokemon()
}, [fetchPokemon])

如果你将pokemon 传递到依赖数组中，它会在你每次调用setPokemon 时更新，因为口袋妖怪更新又名，你有一个无限循环。

【讨论】：