Question

我在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, …}

谢谢。

Answer 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时，它将更新一次。

UseEffect无限循环与依赖项数组

1 个答案: