Javascript 在刷新父零部件之前，辅项中的props 为空

我有一个可以工作的应用程序，props 没有问题，除非我必须在将这些变量发送给子组件之前对它们进行过滤.以下是我的父组件:

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import ItemDetail from './ItemDetail';

const ItemDetailContainer = () => {
    const { itemId } = useParams();
    const [catData, setCatData] = useState([]);
    const [prodData, setProdData] = useState([]);

    const getData = () => {
        fetch('/data.json', {
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
            },
        })
            .then(function (response) {
                return response.json();
            })
            .then(function (myJson) {
                setProdData(myJson['products'].find((c) => c.id == itemId));
                setCatData(myJson['categories'].find((c) => c.catId == prodData.catId));
            });
    };
    useEffect(() => {
        getData();
    }, []);

    if (prodData === null || catData === null || prodData === undefined || catData === undefined) {
        return null;
    }

    return <ItemDetail prodInfo={prodData} catInfo={catData} />;
};

export default ItemDetailContainer;

当我在ItemDetail中收到这些props 时，我得到一个空白对象:

但当我返回到我的代码并在ItemDetailContainer(父组件)上点击保存时，我从Childs的props 中获得了内容:

我try 使用带有和不带有依赖项、超时、间隔以及从函数返回的useEffect.我真的不知道还能try 什么.有什么线索吗？

顺便说一句，我只在控制台上展示了其中一个props .这就是为什么它们是一样的(我不知道为什么它们总是出现两次).

虽然这个问题看起来是重复的，但其他帖子/答案并没有用最近获得的数据进行计算，这是我所说的问题.