React Hook useEffect 缺少依赖项：'id'。 包括它或删除依赖数组

Question

对不起这个琐碎的问题（也许），但我已经打了几个小时的头。 错误在哪里？

import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { SingleCoin } from '../config/api';

const {id} = useParams();
const [coins, setCoins] = useState();
const {currency, symbol} = CryptoState();
    
useEffect(()=>{
    const fetchCoins = async () => {
        const {data} = await axios.get(SingleCoin(id));
        setCoins(data);
    };
    fetchCoins();
}, []);

React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array

Answer 1

您在useEffect函数中使用的任何变量都需要在依赖数组中，以便可以对其进行监视，并且仅当该变量更改时才会运行 useEffect。

useEffect(()=>{
    const fetchCoins = async () => {
        const {data} = await axios.get(SingleCoin(id));
        setCoins(data);
    };
    fetchCoins();
}, [id]);

将id添加到作为useEffect的第二个参数的数组中以清除此错误。 参考

Answer 2

useEffect 和其他一些钩子需要提供一个依赖数组。 这是作为数组传递的最后一个参数。 依赖项告诉钩子要观察哪些变量或元素的变化。 如果依赖项发生变化，钩子也应该期待新的行为，并因此更新。

要解决您的问题，您需要在依赖项数组中提供 id，因为警告状态如下：React Hook useEffect has a missing dependency: 'id'

useEffect(()=>{
    const fetchCoins = async () => {
        const {data} = await axios.get(SingleCoin(id));
        setCoins(data);
    };
    fetchCoins();
}, [id]);