Javascript 在react功能组件中加载道具似乎花费的时间太长？

我有一个功能组件，它包含一些道具。其中一个道具是ID的列表。我使用这些ID从后端服务获取数据。它是一个简单的组件，可以显示每个用户的邮件数量，并利用谷歌图表

export const MessageChart = (props) => {
    const [chartData, setChartData] = useState([]); 

    const createData = async () => {
        let obj = {Year_Duration: "Messages"};
        let message_data = [];
        let array_data = [];

        for(let i=0;i<props.data.length;i++){
            await api.get('/usermessagestats/'+props.data[i]).then(result => {
                let found_data = result.data[0];
                if(props.name == undefined){
                    if(!(found_data.duration_title in obj)){
                        obj[found_data.duration_title] = found_data.number_of_messages;
                    }else{
                        obj[found_data.duration_title]  = obj[found_data.duration_title] + found_data.number_of_messages;
                    }
                }
                else if (props.name == result.data[0].user){
                    message_data.push(result.data[0]);
                    if(!(found_data.duration_title in obj)){
                        obj[found_data.duration_title] = found_data.number_of_messages;
                    }else{
                        obj[found_data.duration_title]  = obj[found_data.duration_title] + found_data.number_of_messages;
                    }
                }
            });
        }
        Object.entries(obj).map(value => {
            array_data.push(value);
        });
        
        setChartData(array_data);
    }

    useEffect(() => {
        createData();
    }, []);

    return (
        <ChartBox>

            <Chart
                width={'100%'}
                height={'100%'}
                chartType="ColumnChart"
                loader={<CircularProgress />}
                data={chartData}
                options={{
                    legend: { position: 'none' },
                    chart: {
                        title: 'Messages',
                        subtitle: 'Per year',
                    },
                    colors: [colours.chartBars],
                    backgroundColor: colours.box,
                    hAxis: {
                        textStyle: {
                            color: colours.chartText
                          }
                    },
                    vAxis: {
                        textStyle: {
                            color: colours.chartText
                          }
                    }
                }}
            />
            <button onClick={createData}>check if chart works</button>
        </ChartBox>
    )
}

export const MessageChart=（道具）=>{
常量[chartData，setChartData]=useState（[]）；
const createData=async（）=>{
设obj={Year_Duration:“Messages”}；
让消息_data=[]；
让数组_data=[]；
for（设i=0；i{
让found_data=result.data[0]；
if（props.name==未定义）{
如果（！（在obj中找到数据持续时间标题））{
obj[found_data.duration_title]=消息的found_data.number_；
}否则{
obj[found_data.duration_title]=obj[found_data.duration_title]+found_data.number_消息；
}
}
else if（props.name==result.data[0].user）{
消息_data.push（结果数据[0]）；
如果（！（在obj中找到数据持续时间标题））{
obj[found_data.duration_title]=消息的found_data.number_；
}否则{
obj[found_data.duration_title]=obj[found_data.duration_title]+found_data.number_消息；
}
}
});
}
Object.entries（obj.map）（值=>{
数组_data.push（值）；
});
setChartData（数组_数据）；
}
useffect（（）=>{
createData（）；
}, []);
返回(
检查图表是否有效
)
}

带有ID列表的道具称为数据。 我遇到的问题是，当我加载页面并加载我得到的组件时，for循环中出现错误，说它无法读取props.data.length，并且它是未定义的。但是，如果我退出错误并按下按钮测试数据是否显示，它是否工作？因此，数据道具（ID列表）肯定存在，但由于某种原因，在几秒钟之后我才能使用它

现在我是一个React初学者，所以我可能只是使用React错误，但道具似乎需要很长时间才能传递到组件

ChartBoxi只是一个样式化组件，因此可以忽略它。

---

我使用的是最新版本的React。

您最初在props.data中有哪些内容？看来你需要检查一下是否有我们的道具。数据，然后做所有的功能。。类似于：如果props.data{all thr for loop…}props未作为流传递，则它们在组件的初始化阶段初始化，您可以在useEffect中观察props的更改，并仅在以下情况下运行createData函数（props.data&&props.data.length>0）@RoeiGrinshpan props.data只是一个数组，其中包含ID的数字。我已经检查过了，看看它是否是空的，而且从来都不是。因此，数组的长度必须大于0。那么循环应该运行吗？然而，react告诉我props.data未定义，但如果我等几秒钟，它就可用了，我不知道为什么？@Alopwer非常感谢你的建议，它成功了！你最初的道具数据是什么？看来你需要检查一下是否有我们的道具。数据，然后做所有的功能。。类似于：如果props.data{all thr for loop…}props未作为流传递，则它们在组件的初始化阶段初始化，您可以在useEffect中观察props的更改，并仅在以下情况下运行createData函数（props.data&&props.data.length>0）@RoeiGrinshpan props.data只是一个数组，其中包含ID的数字。我已经检查过了，看看它是否是空的，而且从来都不是。因此，数组的长度必须大于0。那么循环应该运行吗？然而，react告诉我props.data未定义，但如果我等几秒钟，它就可用了，我不知道为什么？@Alopwer非常感谢你的建议，它成功了！