如何根据React中导入的数据传递不同的值？

柳林

我想从归类为“交付”和“咖啡馆”等类别的js文件中获取数据，然后将不同的数据交付到不同的页面。

我考虑过如何使用map（）导入它，但是我不断收到诸如未定义“产品”之类的错误。

它必须完成，但是不能很好地用javascript实现并且反应较弱。如果您知道该怎么做，请告诉我。

Products.js

export const Product = [
  {
    Delivery: [
      {
        id: '101',
        productName: '허니랩',
        summary: '밀랍으로 만든 친환경 식품포장랩 허니랩.',
        description:
          '~~',
        images: ['3k7sH9F'],
        companyName: '허니랩',
        contact: '02-6082-2720',
        email: '[email protected]',
        url: 'https://honeywrap.co.kr/',
      },
      {
        id: '102',
        productName: '허니포켓',
        summary: '밀랍으로 만든 친환경 식품포장랩 허니랩. 주머니형태.',
        description:
          "~~",
        images: ['4zJEqwN'],
        companyName: '허니랩',
        contact: "02-6082-2720",
        email: "[email protected]",
        url: "https://honeywrap.co.kr/",
      },
],
},
{
    HouseholdGoods: [
      {
        id: '201',
        productName: '순둥이',
        summary: '아기용 친환경 순한 물티슈',
        description:
          '~',
        images: ['4QXJJaz'],
        companyName: '수오미',
        contact: '080-000-3706',
        email: '[email protected]',
        url: 'https://www.suomi.co.kr/main/index.php',
      },
      {
        id: '202',
        category: ['HouseholdGoods'],
        productName: '순둥이 데일리',
        summary: '친환경 순한 물티슈',
        description: '품질은 그대로이나 가격을 낮춘 경제적인 생활 물티슈',
        images: ['OMplkd2'],
        companyName: '수오미',
        contact: '080-000-3706',
        email: '[email protected]',
        url: 'https://www.suomi.co.kr/main/index.php',
      },
],
},
];

Delivery.js（该文件被临时命名，因为我不知道如何在不分别创建js文件的情况下分类和传送数据。）

import React from "react";

function Delivery(
  productName,
  companyName,
  contact,
  email,
  url,
  summary,
  description
) {
  return (
    <div className="Product">
      <div className="Product__data">
        <h3 className="Product__name">{productName}</h3>
        <h4>{companyName}</h4>
        <h5>Contact: {contact}</h5>
        <h5>Email: {email}</h5>
        <h5>URL: {url}</h5>
        <p className="Product__summary">{summary}</p>
        <p className="Proudct__descriptions">{description}</p>
      </div>
    </div>
  );
}

export default Delivery;

Category.js

import React from "react";
import Delivery from "./Delivery";
import { Product } from "./Products";

class Category extends React.Component {
  render() {
    state = {
      products: [],
    };
    this.setState(_renderProduct());

    return <div>{products ? this._renderProduct() : "nothing"}</div>;
  }

  _renderProduct = () => {
    const { products } = this.state;
    const renderProducts = products.map((product, id) => {
      return (
        <Delivery
          productName={Product.productName}
          companyName={Product.companyName}
          contact={Product.contact}
          email={Product.email}
          url={Product.url}
          summary={Product.summary}
          description={Product.description}
        />
      );
    });
  };
}

export default Category;

抱歉，谢谢您的长期提问。

巴斯·范·德·林登

我发现了很多不同的问题。

首先是您setState在Category组件中的render内部调用，这将导致无限循环。而是setState在生命周期方法之内进行调用，componentDidMount或者使用useEffect钩子（如果使用功能组件）。

另一个问题是stateinCategory也定义在inside中render。在类组件中，通常会将其放在render之外的类构造函数中。

在您setState提到的呼叫中_renderProduct()，应this._renderProduct()改为。

现在，这里的主要问题是数据的结构/如何呈现此结构。

Products是一个对象数组，其中每个对象都具有Delivery或HouseholdGoods属性（即产品数组）。我建议您将这种结构更改为以下形式：

export const Product = {
  Delivery: [
    {
      id: "101",
    },
    {
      id: "102",
    },
  ],
  HouseholdGoods: [
    {
      id: "201",
    },
    {
      id: "202",
    },
  ],
};

或这个：

export const Product = [
  { id: "101", productType: "Delivery" },
  { id: "102", productType: "Delivery" },
  { id: "201", productType: "HouseholdGoods" },
  { id: "202", productType: "HouseholdGoods" },
];

我个人更喜欢第二种结构，但是我已经实现了第一种结构，因为这似乎是您要使用的结构：

class Category extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: null,
    };
  }

  componentDidMount() {
    this.setState({ products: Product });
  }

  render() {
    const { products } = this.state;
    return (
      <div>
        {products
          ? Object.keys(products).map((productKey) => {
              return (
                <div key={productKey}>
                  {products[productKey].map((product) => {
                    return (
                      <Delivery
                        key={product.id}
                        productName={product.productName}
                        companyName={product.companyName}
                        contact={product.contact}
                        email={product.email}
                        url={product.url}
                        summary={product.summary}
                        description={product.description}
                      />
                    );
                  })}
                </div>
              );
            })
          : "no products"}
      </div>
    );
  }
}

我们这里需要一个嵌套循环，因为我们需要映射每个属性键以及每个属性内的对象数组。如果您使用上面显示的其他结构Product，则可以简单地映射Product而不需要两个循环。

现在，最后一个重要的问题是您没有破坏Delivery组件内部的props ，而是应该执行以下操作：

function Delivery({
  productName,
  companyName,
  contact,
  email,
  url,
  summary,
  description,
}) {
  return (
    <div className="Product">
      <div className="Product__data">
        <h3 className="Product__name">{productName}</h3>
        <h4>{companyName}</h4>
        <h5>Contact: {contact}</h5>
        <h5>Email: {email}</h5>
        <h5>URL: {url}</h5>
        <p className="Product__summary">{summary}</p>
        <p className="Proudct__descriptions">{description}</p>
      </div>
    </div>
  );
}

沙箱示例

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

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