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

Question

我有一个 JSON 数据，并且有 2 个组件 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 对象传递给上述 2 个组件，并且按顺序传递。

我不知道如何在 Reactjs 中做到这一点。寻找一些可靠的建议。

此处附有游戏图片。

Answer 1

    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>
       );
   }

上述方式可以作为您的起点。