当我尝试使用 useEffect 钩子从 API 获取数据时，我的 React 代码出现了一些问题。

这是我的简化代码：

const App = () => {

    const [ data, setData ] = useState([]);
    const [ loading, setLoading ] = useState(false);

    useEffect(() => {
        
        const loadData = async () => {

            try {
                setLoading(true);
                const response = await fetch(`htts://localhost/api/`);
                const json = await response.json();
                console.log(json);
                setData(json);
                setLoading(false);
            } catch (error) {
                console.log("error: " + error);
            }
        }

        loadData();

    }, []);
}

我遇到了一个问题，当我渲染 html 时，它给出了一些错误，我无法将这些错误映射到我从 API 中设置的某些 data 。

我当时认为，设置 data 变量将使我能够在模板中吐出数据和各种对象键名，例如：

{
     data.keyname.map((item, index) => {
            return (
                    <option key={ index }
                            value={ item.displayName }
                    >
                    { item.displayName }
                    </option>
            );
    })
}

我是不是忽略了什么？似乎我的数据没有加载，因此渲染代码无法循环遍历渲染应用程序所需的任何数据。