如何将数据数组插入表中

Question

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

____________________________________________________
| 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>

Answer 1

问题在于您的 function 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>
  );
}

Answer 2

将密钥作为参数传递给其他人并直接使用该密钥来获取位置

const getTheLocation = (key) => {
        return (
                <p >{productsHistoryLocation[key].product_location}</p>
        )
    }

    const renderProducts = () => {
        return (
            productsData.map((product, key) => 
            (
                <tr key={product.product_number}>
                        <td>{products.bacs_unit}</td>
                        <td>{products.serial_number}</td>
                        <td>{getTheLocation(key)}</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>