1 回答
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊
正如有人在評(píng)論中所說,狀態(tài)更新將反映在下一次渲染中。此外,我將解決您的代碼中的一些問題。
const [rates, setRates] = useState({});
useEffect(() => {
// move this in here unless you plan to call it elsewhere
const search = async () => {
const response = await axios.get('https://api.exchangeratesapi.io/latest');
const data = response.data.rates;
setRates(data);
};
search();
}, [/* no dependencies means it runs once */]);
如果您確實(shí)計(jì)劃在其他地方調(diào)用search,請(qǐng)將其包裝在一個(gè)useCallback鉤子中,以便您可以將其設(shè)置為您的依賴項(xiàng)useEffect(如果沒有,您將收到一個(gè) lint 警告)。useCallback使用空的依賴數(shù)組將始終返回相同的函數(shù)引用,因此您useEffect將只運(yùn)行一次,就像現(xiàn)在一樣。
如果您search作為組件中的普通函數(shù)離開,則引用會(huì)更改每個(gè) render,因此如果您將其作為依賴項(xiàng)包含在內(nèi),您的效果將在每次渲染時(shí)運(yùn)行。
const [rates, setRates] = useState({});
const searchCallback = useCallback(async () => {
const response = await axios.get('https://api.exchangeratesapi.io/latest');
const data = response.data.rates;
setRates(data);
}, [])
useEffect(() => {
// move this in here unless you plan to call it elsewhere
search();
}, [searchCallback]);
添加回答
舉報(bào)
