React useEffect提示缺少id依赖项警告问题求解

该警告由React官方的Hooks规则检查插件eslint-plugin-react-hooks抛出：
你在useEffect的回调中使用了外部作用域的变量id（来自路由钩子useParams的返回值），但给useEffect传入的依赖数组为空数组[]。空依赖数组代表当前effect仅会在组件首次挂载时执行1次，后续如果路由变化导致id值更新，effect不会重新触发，页面会一直展示旧id对应的币种数据，产生数据与路由不匹配的逻辑bug。

另外你的代码存在两个会直接导致运行报错的隐性问题：

• 没有引入useParams方法
• React Hooks只能在函数组件/自定义Hook的顶层调用，你当前的代码把hooks直接写在了文件顶层，会触发Invalid hook call报错

按照Hooks规范，将effect回调中用到的所有外部可变值都加入依赖数组即可，既可以消除警告，也能保证数据随依赖变化自动同步。
修复后的完整可运行代码如下：

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

const CoinPage = () => {
  const {id} = useParams();
  const [coin, setCoin] = useState();
  const {currency, symbol} = CryptoState();
    
  useEffect(()=>{
    const fetchCoin = async () => {
      const {data} = await axios.get(SingleCoin(id));
      setCoin(data);
    };
    fetchCoin();
  }, [id]);

  return (
    <div>{/* 你的页面渲染逻辑 */}</div>
  )
}

export default CoinPage;

补充提示：如果后续你的接口请求需要用到currency参数（比如根据用户选择的法币返回对应计价数据），需要把currency也加入依赖数组，依赖数组最终为[id, currency]，保证切换法币时自动刷新数据。

内容的提问来源于stack exchange，提问作者Tommaso Ceredi