因为您使用的是useEffect之外定义的内容（在本例中是fetchProduct函数），react将抛出一个警告，指出**如果fetchProduct函数内部发生了某些更改，useEffect将不会捕捉到该更改。**例如：假设fetchProduct中的match.params.id在页面第一次加载时等于1，但后来match.params.id变为2，useEffect中的fetchProduct函数仍将使用1作为match.params.id，因为useEffect没有捕捉到更改。
所以要解决这个警告，有两个选择，第一个是在useEffect里面写fetchProduct函数逻辑：

useEffect(() => {
  axios
    .get(`https://fakestoreapi.com/products/?id=${match.params.id}`)
    .then((res) => {
      setData(res.data);
      console.log(res.data);
    })
    .catch((err) => console.log(err));
}, [match.params.id]);

使match.params.id在依赖性数组中以确保useEffect是最新的。
但是如果你需要重用fetchProduct函数，那么你应该做如下的事情：

const fetchProduct = useCallback(() => {
  axios
    .get(`https://fakestoreapi.com/products/?id=${match.params.id}`) // use match to get product id
    .then((res) => {
      setData(res.data);
      console.log(res.data);
    })
    .catch((err) => console.log(err));
}, [match.params.id]);

useEffect(() => {
  fetchProduct();
}, [fetchProduct]);

这是一个警告，请查看useEffect()的文档
https://reactjs.org/docs/hooks-effect.html.
每当你在数组中添加一个依赖项时，它会监视所有这些值，并且每当那个特定的值/依赖项改变时，它会重新运行useEffect钩子。
https://reactjs.org/docs/hooks-effect.html#:~:text=React%20to%20skip%20applying%20an%20effect%20if%20certain%20values%20haven%E2%80%99t%20changed%20between%20re%2Drenders

您在效果中使用的是fetchProduct函数，因此它是一个依赖项。错误消息应该会告诉您这一点。
一种解决方法是将fetchProduct函数移到效果中，这样match将成为效果的依赖项，但您可能希望match更改为您最希望获取的新产品。

useEffect(() => {
  // function fetchProducts
  const fetchProduct = () => {
    axios
      .get(`https://fakestoreapi.com/products/?id=${match.params.id}`) // use match to get product id
      .then((res) => {
        setData(res.data);
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };
  fetchProduct();
}, [match]);