路由器更改时如何重新渲染和运行useEffect（React js）

Question

我有一个ChartPage 函数，它在三个不同的路由器中被调用了三次，在那个ChartPage 函数中，我正在使用“useEffect”，它根据所选路由更新一些变量。但由于某种原因，它只触发了一次，当我要去使用相同 ChartPage 函数的不同路线时，“useEffect”不会再次触发，即使路线正在改变，数据仍然是相同的触发的第一条路线。
有人可以帮助解决这个问题吗，我尝试解决了几个小时

基本上我想在单击其中一个按钮时触发“useEffect”

app.js：

import React from "react";
import Navbar from "./components/Navbar";
import "./App.css";
import Home from "./components/pages/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import ShowStocks from "./components/pages/ShowStocks";
import ChartPage from "./components/pages/ChartPage";

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" exact element={<Home />} />
          <Route path="/show-stocks" element={<ShowStocks />} />
          <Route
            path="show-stocks/bitcoin"
            element={<ChartPage type={"BTC"} />}
          />
          <Route
            path="show-stocks/ethereum"
            element={<ChartPage type={"ETH"} />}
          />
          <Route
            path="show-stocks/cardano"
            element={<ChartPage type={"ADA"} />}
          />
        </Routes>
      </Router>
    </>
  );
}

export default App;

如您所见，我在三个不同的路线中使用 ChartPage，但使用的数据不同
ChartPage.js：

import React, { Component, useState, useEffect } from "react";
import "../../App.css";
import Chart from "../Chart";
import { Button } from "../Button.js";
import "./ChartPage.css";
import axios from "axios";

function getCoin(type) {
  console.log("requesting");
  var path = `/show-stocks/${type}`;
  return axios.get(path).then((response) => {
    return response.data;
  });
}

export default function ChartPage({ type }) {
  const [values, setValues] = useState(null);
  // type is changing correctly and the function did get called with a different type
  // but useEffect doesn't run on the second time
  // so getCoin does not get triggerd and the data stays the same 
  useEffect(() => {
    getCoin(type)
      .then((response) => {
        setValues(response);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <>
      <div className="chart-page-container">
        <h1>{type} Price Market Value</h1>
        <div className="chart-container">
          {null !== values ? (
            <Chart data={[values, type]} />
          ) : (
            <p>Loading...</p>
          )}
        </div>
        <div className="chart-page-btns">
          <Button
            link="/show-stocks/bitcoin"
            className="btns"
            buttonStyle="btn--outline2"
            buttonSize="btn--large2"
          >
            Bitcoin
          </Button>
          <Button
            link="/show-stocks/ethereum"
            className="btns"
            buttonStyle="btn--outline2"
            buttonSize="btn--large2"
          >
            Ethereum
          </Button>
          <Button
            link="/show-stocks/cardano"
            className="btns"
            buttonStyle="btn--outline2"
            buttonSize="btn--large2"
          >
            Cardano
          </Button>
        </div>
      </div>
    </>
  );
}

如您所见，更改路由和类型的按钮会根据路由发送的参数进行更新，但 useEffect 不会再次调用。

Answer 1

将类型添加到useEffect的依赖数组中：

useEffect(() => {
  getCoin(type)
    .then((response) => {
      setValues(response);
    })
    .catch((error) => {
      console.log(error);
    });
}, [type]); // <= HERE