如何使用从 React 组件返回中选择来进行 API 调用？

Question

我的组件当前如下所示：

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传递到getBalance()(进行api调用(中，这样当用户更改任一选择时，页面将自动重新进行api调用。有人知道做这件事的简单方法吗？

Answer 1

如果你想用变量的变化重新呈现你的组件，你应该将它们设置为状态，并将它们作为依赖项传递给你的useEffect:

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

<select class="select" id="startYear" onChange={(event) => setStartYear(evene.target.value)}>
<option value="2017" selected>2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
<select class="select" id="endYear" onChange={(event) => setEndYear(event.target.value)}>
<option value="2020" selected>2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>