表头的显示次数与JSON数据的显示次数一样多.我该怎么解决

Question

在下面的代码中，我想将第一行命名为"公司名称"；等等。但表名的呈现次数与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>
);
};

Answer 1

如果您想呈现一个具有固定标题和动态数据的表，这里有一个示例：

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>
);
};

Answer 2

您的问题是为每个股票创建一个新表，而您应该创建一次表，然后添加行。下面是一个例子，应该在你已经提供的命名之后为你工作：

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>
);
};