在 ReactJs 中显示产品数组

Question

我正在实现一个名为 Table 的组件，它是从 react-bootstrap 导入的。我目前正在通过数组将数据从父级传递给子级，但是我在通过父类编写数组时遇到了困难，在这种情况下我不知道如何编写代码

这是我在文件夹index.js 中的代码src/components/table/index

import React from 'react';
import {Table, Image} from 'react-bootstrap';
import '../Table/index.css';
import Button from '../Button/index';

const TableItem = ({productList}) => {
  const redirectToEdit = () => {
    console.log("Open edit form for me, please?")
  }

  const deleteProductItem = () => {
    console.log("The product has been deleted")
  }
  return(
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>No. </th>
          <th>Image</th>
          <th>Name</th>
          <th>Category</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {productList.map((product, index) => (
          <tr key={index}>
            <td>{product.id}</td>
            <td><Image src={product.image} /></td>
            <td>{product.name}</td>
            <td>{product.category}</td>
            <td>{product.price}</td>
            <td>
              <Button variant="success" onClick={redirectToEdit}>Edit</Button>
              <Button variant="danger" onClick={deleteProductItem}>Delete</Button>
            </td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export default TableItem;

这是我在app.js文件夹src/app.js中的代码

<TableItem 
   productList={["1", "https://place-hold.it/100x150", "Black milk tea", "Milk Tea", "10000"]}
/>

在上面，我只是添加了 1 个产品，但运行时不显示，我的问题是 如何在app.js 中为此编写许多产品通过 数组

谁能帮帮我，非常感谢？

Answer 1

产品列表数组应如下所示：

const productList=[
{
  id:"1",
  image:"https://place-hold.it/100x150",
  name:"Black milk tea",
  category:"Milk Tea",
  price:"10000"
},{
  id:"2",
  image:"https://place-hold.it/100x150",
  name:"Black milk tea",
  category:"Milk Tea",
  price:"10000"
}];
.
.
.
<TableItem productList={productList} />

Answer 2

您必须更改代码中的两件事。首先是它的字典，它传递给你 TableItem 所以代码必须是

const TableItem = (dict) => { 
    productList = dict.productList;
    // then your remaining code..

并且在渲染它时，您需要按如下方式传递 productList：

<TableItem productList={[{id:"1", image:"https://place-hold.it/100x150", name:"Black milk tea",category: "Milk Tea",price: "10000"}]} />

现在让我帮你弄清楚你的概念，第一件事是如果你使用点访问一些属性你必须有一个字典而不是你只有一个列表作为你的产品列表，其次每次反应你声明一个函数或者 Component u 中的构造函数类通过字典传递，通常人们将其命名为 props。

Answer 3

您应该提供一个对象数组。试试这个

<TableItem     
productList={[
{"id":"1","image": "https://place-hold.it/100x150","name": "Black milk tea","category": "Milk Tea","price": "10000"}
]} />

您可以提供多个项目，例如，

<TableItem     
productList={[
{"id":"1","image": "https://place-hold.it/100x150","name": "Black milk tea","category": "Milk Tea","price": "10000"},
{"id":"2","image": "https://place-hold.it/150x150","name": "Black milk tea 2","category": "Milk Tea 2","price": "10000"},
{"id":"3","image": "https://place-hold.it/230x150","name": "Black milk tea","category": "Milk Tea 3","price": "10000"}
]} />