如何将API获取的信息渲染展示到ReactDOM网页中

你需要借助React的状态管理Hook存储接口返回数据，再绑定到JSX结构中即可完成渲染，以下是修改后的完整实现：

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

const Test = () => {
  // 存储返回的股票数据
  const [stockList, setStockList] = useState([]);
  // 控制加载状态
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://yh-finance.p.rapidapi.com/market/v2/get-quotes?region=US&symbols=VTI%2C%20AAPL%2CTSLA%2CFB", {
      method: "GET",
      headers: {
        "x-rapidapi-host": "yh-finance.p.rapidapi.com",
        "x-rapidapi-key": "替换为你自己的实际api-key"
      }
    })
    .then(res => res.json())
    .then(res => {
      setStockList(res.quoteResponse.result);
      setLoading(false);
    })
    .catch(err => {
      console.error("接口请求失败：", err);
      setLoading(false);
    })
  }, []);

  if (loading) return <div>数据加载中，请稍候</div>;

  return (
    <>
      <h1>美股行情查询</h1>
      <div style={{padding: '0 20px'}}>
        {stockList.map((item, idx) => (
          <div key={idx} style={{margin: '10px 0'}}>
            股票代码：<b>{item.symbol}</b>，当前买价：<b>{item.bid}</b>
          </div>
        ))}
      </div>
      {/* 如果你只需要展示FB的买价，直接写下面这行即可 */}
      {/* <h2>FB当前买价：{stockList[3]?.bid}</h2> */}
    </>
  );
};

export default Test;

核心修改点 #

• 新增useState定义响应式状态，状态更新后React会自动触发页面重渲染，把最新数据展示出来
• 新增useEffect包裹请求逻辑，空依赖数组保证接口只会在组件首次挂载时调用1次，避免重复请求的问题
• 渲染时加可选链?.取值，能避免数据还没返回时的 undefined 报错
• 新增了加载状态和错误捕获逻辑，优化使用体验

内容的提问来源于stack exchange，提问作者user16645351