React - 从 API 获取数据并显示从 JSON 返回的数据

Question

我正在学习获取数据，但似乎无法用 React 来正确完成它。我有一个演示 API，可以在浏览器中返回 JSON 数据，但是当我将其作为我正在制作的应用程序中的函数进行测试时，没有运气，非常感谢所有帮助！

应用程序

import FetchData from './FetchData';

function App() {
  return (
    <div>
      <FetchData />
    </div>
  );
}
export default App;

获取数据组件

import { useState, useEffect } from 'react';

const FetchData = () => {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch('https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=IBM&apikey=demo')
            .then((res) => {
                return res.json();
            })
            .then((data) => {
                console.log(data);
                setData(data);
            });
    }, []);
    return (
        data.map(data => (
            <div key={data.id}>
                <h1>{data.symbol}</h1>
                <p>{data.price}</p>
            </div>
        );
            )
};

export default FetchData;

我只想在页面上呈现股票代码和价格。

Answer 1

返回数据的格式是什么以及您得到的输出/错误是什么？