我有一个问题，我的小React应用程序中的useEffect() React钩子从未被触发。
当应用加载时，它首先转到index.js，然后加载Dungeon组件。
所以它在这个意义上是有效的。
你可以看到我有console.log()调用，所以我可以看到什么被击中了，什么没有。
因此，应用程序在开始时加载查找，没有错误。
它确实加载了Dungeon组件，我看到预期的generationId被写入控制台。
API端点工作正常，因为我可以使用Postman成功测试它。
问题是，它永远不会命中API，因为getGeneration函数永远不会命中，因为useEffect永远不会被触发。
我得到的错误是：

Dungeon.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'data')

错误发生是因为data从未被API填充。
所以我知道为什么我会得到错误，但我不知道为什么useEffect没有被触发。
有没有人觉得有什么不对或不好的地方？
下面是我的index.js：

ReactDOM.render(
    <React.Fragment>
        <Dungeon generationId={id} />
    </React.Fragment>,
    document.getElementById('dungeon')
)

下面是Dungeon组件：

import React, { useState, useEffect } from "react";
import axios from 'axios';

const Dungeon = ({ generationId }) => {

    const [generationDetails, setGenerationDetails] = useState();
    console.log("Dungeon Component entry :: generationId has a value of --> ", generationId);

    const getGeneration = async (id) => {
        console.log("getGeneration hit.");
        const data = await axios.get('api/generations/' + id);
        setGenerationDetails(data);
    }

    useEffect(() => {
        console.log("useEffect() triggered..but it's never triggered! ");
        getGeneration(generationId);
    }, []) // Empty so it gets called only once
    return (
        <div id="generation">
            <div>
                <div id="generationDescription">
                    <div>Title:{generationDetails.data.title}</div>
                    <div>Description: {generationDetails.data.description}</div>
                </div>
            </div>
        </div>
    );
}

export default Dungeon;