React中useState触发函数无限调用问题求助

问题根源 #

你直接在组件顶层调用LoadData()，组件每次渲染（包括状态更新后）都会执行这个函数，而LoadData内部调用了setCheckVals/setArrCheckDates/setDataVals这些状态更新方法，状态更新会触发组件重新渲染，重新渲染又会再次执行LoadData，最终形成无限循环。

同时你的MultipleDataSet函数存在异步逻辑错误：promises数组在then回调中添加元素，会导致Promise.all执行时数组为空，无法正确等待所有请求完成；catch写法错误，不能用字符串拼接console.error。

解决方案 #

用React的useEffect钩子包裹LoadData调用，控制执行时机；同时修复MultipleDataSet的异步逻辑。

修正后的完整代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';

function YourComponent() {
    const [arrCheckVals, setCheckVals] = useState('');
    const [arrDataVals, setDataVals] = useState([]);
    const [arrCheckDates, setArrCheckDates] = useState('');

    async function MultipleDataSet(CheckNames, IDs) {
        // 直接生成请求Promise数组，统一处理结果
        const promises = CheckNames.split(",").map(entry => {
            return axios.get(`http://localhost:8080/check/chkmeas/vals/${encodeURI(entry)}/${encodeURI(IDs)}`)
                .then(response => {
                    return response.data.map(item => item.Feild_Value);
                })
                .catch(err => {
                    console.error('API Call 4 - Error:', err);
                    return []; // 出错时返回空数组，避免后续逻辑异常
                });
        });

        const results = await Promise.all(promises);
        return results;
    }

    async function LoadData() {
        const CheckIds = await CheckLookupIDs();
        const CheckAPI = `${APIURL_3}${FID}/${CheckIds}`;
        setCheckVals(await CheckVals(CheckAPI));
        setArrCheckDates(await CheckDates(CheckAPI));
        setDataVals(await MultipleDataSet(Multiple, CheckIds));
    }

    // 用useEffect控制LoadData仅在组件挂载时执行一次
    useEffect(() => {
        LoadData();
        // 若需在Multiple/FID变化时重新加载，将变量加入依赖数组：
        // }, [Multiple, FID]);
    }, []);

    return (
        <div>
            {/* 你的组件内容 */}
        </div>
    );
}

export default YourComponent;

关键说明 #

• useEffect的空依赖数组确保LoadData只在组件首次渲染时执行一次，不会因状态更新重复触发
• 重构MultipleDataSet逻辑：直接将每个请求的Promise存入数组，通过Promise.all统一等待所有请求完成，避免异步顺序问题
• 修复catch错误处理，确保请求出错时能正确捕获并返回默认值，避免程序崩溃

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