如何在React组件中通过年份下拉框自动触发API调用？

我希望将startYear和endYear传入getBalance（发起API调用的函数），使得用户更改任意年份下拉框时，页面自动重新发起API调用，请问有简便的实现方法吗？

当前组件代码如下：

import React, { useEffect, useState } from "react";
import Table from "../../../../Table/Table";
import { getBalance } from "../../../../../datasource/Financials";

export default function BalanceSheet() {
  const [data, setData] = useState();
  startYear = ??;
  endYear = ??;

  useEffect(() => {
    const promise = getBalance(startYear, endYear);
    promise.then((data) => {
      setData(data);
    });
  }, []);

  return data ? (
    <>
      <h2>Balance Sheet</h2>
      <select class="select" id="currency">
        <option value="USD">USD</option>
      </select>
      <select class="select" id="startYear">
        <option value="2017" selected>2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
      </select>
      <select class="select" id="endYear">
        <option value="2020" selected>2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
      </select>
      <Table
        theadData={Object.keys(data.data[0].facts)}
        tbodyData={data.data[0].facts}
      />
      ;
    </>
  ) : (
    "Sorry could not get data. Please try again."
  );
}

核心思路是把startYear和endYear设为React状态，绑定到下拉框的value与onChange事件，同时将这两个状态加入useEffect的依赖数组，状态变化时自动触发API调用。

修改后的完整代码：

import React, { useEffect, useState } from "react";
import Table from "../../../../Table/Table";
import { getBalance } from "../../../../../datasource/Financials";

export default function BalanceSheet() {
  const [data, setData] = useState();
  // 初始化状态为下拉框默认选中的年份
  const [startYear, setStartYear] = useState("2017");
  const [endYear, setEndYear] = useState("2020");

  useEffect(() => {
    // 调用API并更新数据，添加错误捕获避免无反馈
    getBalance(startYear, endYear)
      .then((responseData) => setData(responseData))
      .catch(err => console.error("获取数据失败:", err));
  }, [startYear, endYear]); // 依赖数组加入年份状态，变化时触发effect

  return data ? (
    <>
      <h2>Balance Sheet</h2>
      <select className="select" id="currency">
        <option value="USD">USD</option>
      </select>
      {/* 绑定startYear状态与 onChange 事件，实现UI与状态同步 */}
      <select 
        className="select" 
        id="startYear"
        value={startYear}
        onChange={(e) => setStartYear(e.target.value)}
      >
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
      </select>
      {/* 绑定endYear状态与 onChange 事件 */}
      <select 
        className="select" 
        id="endYear"
        value={endYear}
        onChange={(e) => setEndYear(e.target.value)}
      >
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
      </select>
      <Table
        theadData={Object.keys(data.data[0].facts)}
        tbodyData={data.data[0].facts}
      />
    </>
  ) : (
    "Sorry could not get data. Please try again."
  );
}

关键修改点：

• 将startYear和endYear定义为React状态，初始值对应下拉框默认选项
• 给年份下拉框绑定value属性和onChange事件，确保UI选择与状态值同步
• 在useEffect的依赖数组中加入startYear和endYear，年份变化时自动重新执行API调用
• 新增错误捕获逻辑，便于排查API调用失败问题

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