时间戳

首页 > 解决方案 > 表头显示的次数与 JSON 数据一样多。我该如何解决

reactjs - 表头显示的次数与 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>
    );
  };

标签： reactjsjsx

解决方案

如果你想渲染一个带有固定标题和动态数据的表格，这里有一个例子：

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

推荐阅读