Javascript ReactJS游戏-在组件之间切换-无法执行

我有一个JSON数据，有两个组件GameIntroduction.js和GameLevel.js

JSON文件的结构如下所示：

export const gameData = [
    {
        "data": [
            {
            "id": 0,
            "image": "https://images.unsplash.com/photo-1492725764893-90b379c2b6e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Mom"
            },
            {
            "id": 1,
            "image": "https://images.unsplash.com/photo-1482235225574-c37692835cf3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Dad"
            }
        ]
    },
    {
        "data": [
            {
            "id": 2,
            "image": "https://images.unsplash.com/photo-1551445523-324a0fdab051?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Apple"
            },
            {
            "id": 3,
            "image": "https://images.unsplash.com/photo-1553279768-865429fa0078?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Mango"
            },
            {
            "id": 4,
            "image": "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Blueberry"
            }
        ]
    },
    {
        "data": [
            {
            "id": 5,
            "image": "https://images.unsplash.com/photo-1459411621453-7b03977f4bfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "broccoli"
            },
            {
            "id": 6,
            "image": "https://images.unsplash.com/photo-1531170887152-6b21ba4ce8ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "cucumber"
            },
            {
            "id": 7,
            "image": "https://images.unsplash.com/photo-1564874997803-e4d589d5fd41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "tomato"
            },
            {
            "id": 8,
            "image": "https://images.unsplash.com/photo-1506807803488-8eafc15316c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "beetroot"
            }
        ]
    },
    {

        "data": [
            {
            "id": 9,
            "image": "https://images.unsplash.com/photo-1518674660708-0e2c0473e68e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Pen"
            },
            {
            "id": 10,
            "image": "https://images.unsplash.com/photo-1516962215378-7fa2e137ae93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Pencil"
            },
            {
            "id": 11,
            "image": "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Book"
            },
            {
            "id": 12,
            "image": "https://images.unsplash.com/photo-1527239441953-caffd968d952?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Papers"
            },
            {
            "id": 13,
            "image": "https://images.unsplash.com/photo-1551818014-7c8ace9c1b5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Pendrive"
            }
        ]
    }
]

现在我需要先在GameIntroduction.js中显示JSON的每个对象30秒，然后在GameLevel.js中显示相同的对象，以便用户玩一些游戏。用户在GameLevel.js中完成某些任务后，它会自动移动到GameIntroduction.js，持续30秒，然后移动到GameLevel.js。 这个循环一直持续到JSON中的所有元素都被循环。一次只将JSOn的一个对象传递给上述两个同样按顺序传递的组件

我不知道如何用英语做这件事。寻找一些可靠的建议

游戏图片附在这里。

从“gamedatafile”导入{gameData}；
const InitialGame=（）=>{
返回
}

constgamelevel=（{gameData}）=>{
const[currentGame，setCurrentGame]=useState（0）；
React.useffect（（）=>{
setInterval（（）=>{setCurrentGame（currentGame+1）}，30）；
}，[currentGame，setCurrentGame]）；
返回(
{gameData[currentGame]}
);
}

---

以上方法可以作为您的起点。

您可以分享一些您正在尝试的代码吗。谢谢@Y M。我会经历这一切，然后试着从这里起飞。酷。如果有意义，请接受它，并编辑答案，以便您可以帮助他人：）

    import { gameData } from 'gamedatafile';

    const InitialGame = () => {
      return <GameLevel gameData={gameData} /> 
    }

   const GameLevel = ({gameData}) => {
       const [currentGame, setCurrentGame] = useState(0);
       React.useEffect(() => {
          setInterval(() => { setCurrentGame(currentGame+1) }, 30);
       }, [currentGame, setCurrentGame]);

       return (
            <div>{gameData[currentGame]}</div>
       );
   }