Reactjs 表头显示的JSON数据的次数与JSON数据的显示次数相同。我怎样才能解决这个问题

在下面的代码中，我想将第一行命名为“CompanyName”，以此类推。但是，表名呈现的值是JSON中总值的两倍。谁能告诉我如何解决这个错误，并在第一行显示列名，然后显示数据

import React from "react";
import "./App.css";
import { stockData } from "./data";


  export const Stocks = () => {
    return (
      <>
        <HomePageHeader />
        <div className="stock-container">
          {stockData.map((data, key) => {
            return (
              <div key={key}>
                <Stock
                  key={key}
                  company={data.company}
                  ticker={data.ticker}
                  stockPrice={data.stockPrice}
                  timeElapsed={data.timeElapsed}
                />
              </div>
            );
          })}
        </div>
      </>
    );
  };
  const HomePageHeader=()=>{
    return(
      <header className="header">
        Your stock tracker
      </header>
    );
  };


  const Stock = ({ company, ticker, stockPrice, timeElapsed }) => {
    if (!company) return <div />;
    return (
      <table>
        <tbody>
          <tr>
            <td>
              <h5>Company Name</h5>
            </td>
            
          </tr>
        </tbody>
      </table>
    );
  };
  
  

从“React”导入React；
导入“/App.css”；
从“/data”导入{stockData}；
出口常量库存=（）=>{
返回(
{stockData.map（（数据，键）=>{
返回(
);
})}
);
};
常量HomePageHeader=（）=>{
返回(
你的股票追踪器
);
};
常数股票=（{公司，股票代码，股票价格，时间流逝}）=>{
如果（！公司）返回；
返回(
公司名称
);
};

如果要呈现具有固定标题和动态数据的表，请参见以下示例：

import React from "react";
import "./App.css";
import { stockData } from "./data";

export const Stocks = () => {
  return (
    <>
      <HomePageHeader />
      <StockTable />  
    </>
  );
};

const HomePageHeader=()=>{
  return(
    <header className="header">
      Your stock tracker
    </header>
  );
};


const StockTable = ({ company, ticker, stockPrice, timeElapsed }) => {
  if (!company) return <div />;
  return (
    <table>
      <thead>
        <tr>
          <td>
            <h5>Company Name</h5>
            <h5>Ticker</h5>
          </td>
        </tr>
      </thead>
      <tbody>
        {stockData.map((data, key) => {
          return (
            <tr>
              <td>{data.company}</td>
              <td>{data.ticker}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};
  
  

从“React”导入React；
导入“/App.css”；
从“/data”导入{stockData}；
出口常量库存=（）=>{
返回(
);
};
常量HomePageHeader=（）=>{
返回(
你的股票追踪器
);
};
const StockTable=（{公司、股票代码、股票价格、时间流逝}）=>{
如果（！公司）返回；
返回(
公司名称
股票行情
{stockData.map（（数据，键）=>{
返回(
{data.company}
{data.ticker}
);
})}
);
};

您的问题是，您正在为每个股票创建一个新表，而您应该创建一次表，然后添加行。下面是一个示例，您可以使用您已经提供的名称：

export default function App() {
  let stocks = null;
  if (stockData.length) {
    stocks = (
      <table>
        <thead>
          <tr>
            <th>Company</th>
            <th>Ticker</th>
            <th>Price</th>
            <th>Elapsed Time</th>
          </tr>
        </thead>
        <tbody>
          {stockData.map((stock, x) => (
            <Stock
              key={stock.company}
              company={stock.company}
              ticker={stock.ticker}
              stockPrice={stock.stockPrice}
              timeElapsed={stock.timeElapsed}
            />
          ))}
        </tbody>
      </table>
    );
  }

  return (
    <>
      <HomePageHeader />
      <div className="stock-container">{stocks}</div>
    </>
  );
}

const HomePageHeader = () => {
  return <header className="header">Your stock tracker</header>;
};

const Stock = ({ company, ticker, stockPrice, timeElapsed }) => {
  if (!company) return;
  return (
    <tr>
      <td>{company}</td>
      <td>{ticker}</td>
      <td>{stockPrice}</td>
      <td>{timeElapsed}</td>
    </tr>
  );
};

导出默认函数App（）{
让stocks=null；
if（stockData.length）{
股票=(
单位
股票行情
价格
经过的时间
{stockData.map（（股票，x）=>(
))}
);
}
返回(
{股票}
);
}
常量HomePageHeader=（）=>{
归还你的股票跟踪器；
};
常数股票=（{公司，股票代码，股票价格，时间流逝}）=>{
如果（！公司）返回；
返回(
{公司}
{ticker}
{股票价格}
{timeappeased}
);
};

是否要呈现表格，使表头固定，而表体是stockData对象中的数据？是的，您能帮我一下吗？我尝试了上述方法，但它们显示在同一行上。您能告诉我如何确保它们显示在新的行中吗