为什么 react 多次调用 api 来加载页面？

Question

我正在使用钩子设置页面以从第 3 部分 api 加载数据，在获得数据后，我正在对数据进行多次计算，然后将其作为道具发送到组件。 似乎每次计算都会调用 api 1 次，但我不明白为什么。

这是调用api的函数

const StockData = async () => {
    const stockData = await Axios.get(ApiString);
    return stockData;
};

export default StockData;

仪表板页面 index.js

const EcommerceDashboardPage = () => {
    const [close, setClose] = useState(10);
    const [allClose, setAllClose] = useState([0]);
    const [name, setName] = useState('Stock');
    const [ticker, setTicker] = useState('STK');
    const [previousClose, setPreviousClose] = useState(9);
    const [dailyChange, setDailyChange] = useState(10);
    const [changePrice, setDailyPrice] = useState(11);
    const [logo, setLogo] = useState('logo');
    const [arrow, setArrow] = useState('mdi mdi-arrow-up-bold');
    const [color, setColor] = useState('price-change-red');
    const [date, setDate] = useState(new Date().toLocaleString());
    const [closeShift, setShift] = useState(0);
    const [prevClose, setPrevClose] = useState(0);

    const roundToHundredth = (value) => {
        return Number(value.toFixed(2));
    };

    const GetStockData = async () => {
        var data = await StockData();
        setShift(data.data.c.length - 1);
        setPrevClose(data.data.c.length - 2);
        setClose(roundToHundredth(data.data.c[closeShift]));
        setPreviousClose(roundToHundredth(data.data.c[prevClose]));
        setDailyChange(roundToHundredth(100 * (1 - close / previousClose)));
        setDailyPrice(roundToHundredth(close - previousClose));
        if (changePrice < 0) {
            setArrow('mdi mdi-arrow-down-bold');
            setColor('price-change-red');
        } else {
            setArrow('mdi mdi-arrow-up-bold');
            setColor('price-change-green');
        }
        setDate(new Date().toLocaleString());
        setAllClose(data.data.c);
        return [];
    };

    const GetCompanyData = async () => {
        var data = await CompanyData();
        setName(data.data.name);
        setTicker(data.data.ticker);
        setLogo(data.data.logo);
        return [];
    };

    useEffect(() => {
        GetStockData();
        GetCompanyData();
    });

    // {close}
    // {name}
    return (
        <React.Fragment>
            <Row>
                <TitleWidget
                    close={close}
                    name={name}
                    previousClose={previousClose}
                    dailyChange={dailyChange}
                    changePrice={changePrice}
                    logo={logo}
                    ticker={ticker}
                    arrow={arrow}
                    color={color}
                    date={date}
                />
            </Row>
            <Row>
                <SplineAreaChart allClose={allClose} ticker={ticker} />
            </Row>
        </React.Fragment>
    );
};

export default EcommerceDashboardPage;

它应该只对 api 进行 2 次调用，1 次用于StockData ，1 次用于CompanyData

Answer 1

您没有将任何依赖项传递给useEffect数组，这导致它在每次渲染时运行。 由于您在 API 调用后更新状态，因此它会不断重新渲染然后重新获取数据。 而是传递一个空的依赖数组，它告诉它只运行一次并且永远不会重新运行，除非组件完全重新安装。

useEffect(() => {
  GetStockData();
  GetCompanyData();
}, []);