React Hook useEffect缺少依赖项警告如何解决？（初学者求助）

你的问题是ESLint的react-hooks/exhaustive-deps规则检测到useEffect中使用了match.params.id，但未将其加入依赖数组导致的警告。以下是两种解决方式：

方式一：添加缺失的依赖（推荐） #

把match.params.id加入useEffect的依赖数组，这样当路由参数变化时，effect会重新执行，重新请求对应产品的数据，这符合单产品页面的预期逻辑：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Header from './../components/Header';

const SingleProduct = ({ match }) => {
  const [product, setProduct] = useState({});

  useEffect(() => {
    const fetchproduct = async () => {
      const { data } = await axios.get(`/api/products/${match.params.id}`);
      setProduct(data);
    };
    fetchproduct();
  }, [match.params.id]); // 此处添加match.params.id作为依赖
};

方式二：临时屏蔽ESLint警告（不推荐，除非有特殊场景） #

如果你确定不需要在参数变化时重新请求数据，可以用ESLint注释忽略这条警告，但这可能会导致参数变化时组件无法更新数据的潜在问题：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Header from './../components/Header';

const SingleProduct = ({ match }) => {
  const [product, setProduct] = useState({});

  useEffect(() => {
    const fetchproduct = async () => {
      const { data } = await axios.get(`/api/products/${match.params.id}`);
      setProduct(data);
    };
    fetchproduct();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
};

补充说明 #

react-hooks/exhaustive-deps规则的作用是确保useEffect中用到的所有外部变量都被声明为依赖，避免因变量更新但effect未重新执行导致的过时数据问题。第一种方式是符合React最佳实践的正确做法，能保证组件在路由参数变化时同步更新产品数据。

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