如何将数据数组插入表

debugcn 发表于 Dev

亨利

我在前端有一个表，需要在表中放入一些数据。以下是我要实现的目标

____________________________________________________
| Product Name | Product Number | Product Location |
----------------------------------------------------
|       A      |       123      |      TEXAS       |
----------------------------------------------------
|       B      |       456      |      NEW YORK    |
----------------------------------------------------

但是，我一直在获得下表。

____________________________________________________
| Product Name | Product Number | Product Location |
----------------------------------------------------
|       A      |       123      |       TEXAS      |
                                       NEW YORK
----------------------------------------------------
|       B      |       456      |       TEXAS      |
                                       NEW YORK
----------------------------------------------------

下面是我的带有JSX和渲染功能的代码

    const getTheLocation = () => {
        return (
            productsHistoryLocation.map((productHistory) => (
                <p key={productHistory.product_id}>{productHistory.product_location}</p>
            ))
        )
    }

    const renderProducts = () => {
        return (
            productsData.map((product) => 
            (
                <tr key={product.product_number}>
                        <td>{products.bacs_unit}</td>
                        <td>{products.serial_number}</td>
                        <td>{getTheLocation()}</td>
                </tr>   
            ))
        )
    }
        <Table aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell><b>Product Name</b></TableCell>
                            <TableCell><b>Product Number</b></TableCell>
                            <TableCell><b>Product Location</b></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {renderProducts()}
                    </TableBody>
             </Table>

Praveen Nambiar

问题出在您的功能getTheLocation以及可能的数据结构上。

将getTheLocation更改为

  const getTheLocation = (idx) => {
    const location = productsHistoryLocation.filter(
      (product) => product.product_id === idx
    );
    return <p key={idx}>{location[0].product_location}</p>;
  };

在这里检查工作逻辑：

检查完整代码：

import "./styles.css";
import {
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody
} from "@material-ui/core";

export default function App() {
  const productsData = [
    {
      product_number: 1,
      bacs_unit: "A",
      serial_number: "123"
    },
    {
      product_number: 2,
      bacs_unit: "B",
      serial_number: "456"
    }
  ];

  const productsHistoryLocation = [
    {
      product_id: 1,
      product_location: "TEXAS"
    },
    {
      product_id: 2,
      product_location: "NEW YORK"
    }
  ];

  const getTheLocation = (idx) => {
    const location = productsHistoryLocation.filter(
      (product) => product.product_id === idx
    );
    return <p key={idx}>{location[0].product_location}</p>;
  };

  const renderProducts = () => {
    return productsData.map((product) => (
      <tr key={product.product_number}>
        <td>{product.bacs_unit}</td>
        <td>{product.serial_number}</td>
        <td>{getTheLocation(product.product_number)}</td>
      </tr>
    ));
  };

  return (
    <div className="App">
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>
              <b>Product Name</b>
            </TableCell>
            <TableCell>
              <b>Product Number</b>
            </TableCell>
            <TableCell>
              <b>Product Location</b>
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{renderProducts()}</TableBody>
      </Table>
    </div>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。