React中useEffect未触发、API未调用致状态未更新及子组件传值失败

核心问题 #

1. useEffect未配置依赖数组：你的useEffect没有传入第二个依赖参数，虽然理论上会触发执行，但在React严格模式或组件渲染逻辑中可能导致执行异常；同时getData函数未被加入依赖列表，会引发React依赖警告，也可能导致函数未被正确调用。
2. 初始状态与空值传递问题：初始state设为{ data: {} }，此时data.OrderMilestoneSummary必然是undefined，直接传递给子组件会导致其拿到undefined。
3. 函数作用域与执行时机问题：getData定义在useEffect之后，虽然函数声明会提升，但在严格模式下可能存在执行时机的偏差。

修复后的代码 #

import { React, useEffect, useState } from 'react';
import MilestoneSummary from './MilestoneSummary';
import { Grid, Column } from '@carbon/react';

const OrderSummary = () => {
    // 初始状态设为空对象，贴合后续接收的JSON结构
    const [data, setData] = useState({});

    useEffect(() => {
        // 将getData定义在useEffect内部，消除依赖问题
        const getData = () => {
            // 本地JSON文件请求无需额外headers，可简化
            fetch('EDIData.json')
                .then(response => {
                    // 新增响应状态检查，处理网络异常
                    if (!response.ok) {
                        throw new Error('请求失败，响应状态异常');
                    }
                    return response.json();
                })
                .then(myJson => {
                    setData(myJson);
                })
                .catch(err => { 
                    console.error('获取数据出错:', err) 
                })
        };

        getData();
    }, []); // 空依赖数组确保仅在组件挂载时执行一次请求

    return (
        <>
            <Grid>
                <Column md={4} lg={4} sm={4}>
                    <h3 className="landing-page__label">Order milestone summary</h3>
                    {/* 使用可选链操作符，避免初始阶段传递undefined引发子组件报错 */}
                    <MilestoneSummary summaryItems={data?.OrderMilestoneSummary} />
                </Column>
            </Grid>
        </>
    )
};

export default OrderSummary;

关键修复点说明 #

• 配置useEffect空依赖数组：确保数据请求仅在组件挂载时执行一次，避免重复发起请求。
• 将getData移入useEffect内部：消除函数依赖的警告，同时保证函数在useEffect执行时的作用域正确。
• 优化初始state结构：将初始值设为{}，更符合后续接收的JSON数据结构。
• 新增响应状态校验：在fetch流程中检查response.ok，及时捕获网络请求失败的情况。
• 使用可选链操作符：data?.OrderMilestoneSummary确保在数据未加载完成时，不会向子组件传递无效值，子组件也可根据自身逻辑添加空值处理。

内容的提问来源于stack exchange，提问作者N.Kaur