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

我想从分类为“Delivery”和“Cafe”的js文件中获取数据，并将不同的数据传递到不同的页面

我曾考虑过如何使用map（）导入它，但不断出现错误，例如未定义“products”

这是必须完成的，但是它没有很好地用javascript实现，而且反应很弱。如果你知道怎么做，如果你能让我知道，我将不胜感激

Products.js

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

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;

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

从“React”导入React；
功能传递(
产品名称，
公司名称，
联系方式，
电子邮件，
网址，
总结，
描述
) {
返回(
{productName}
{companyName}
联系人：{Contact}
电子邮件：{Email}
URL:{URL}
{summary}
{description}
);
}
出口默认交货；

Category.js

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

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;

从“React”导入React；
从“/Delivery”导入交货；
从“/Products”导入{Product}”；
类类别扩展了React.Component{
render（）{
状态={
产品：[]，
};
this.setState（_renderProduct（））；
返回{products？this.\u renderProduct（）：“nothing”}；
}
_renderProduct=（）=>{
const{products}=this.state；
const renderProducts=products.map（（产品，id）=>{
返回(
);
});
};
}
导出默认类别；

---

很抱歉，谢谢你提出这么长的问题。

我发现了很多不同的问题

首先，在

类别

组件中调用

设置状态

内部渲染，这会导致无限循环。相反，在生命周期方法中调用

setState

，如

componentDidMount

，或者如果使用功能组件，则使用

useffect

钩子

另一个问题是

类别

中的

状态

也在

渲染

中定义。在类组件中，您通常会将其放在render之外的类构造函数中

在您的

设置状态

调用中，您指的是

\u renderProduct（）

，这应该是

this.\u renderProduct（）

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

Products

是一个对象数组，其中每个对象都有一个

Delivery

或

HouseholdGoods

属性，该属性是一个产品数组。我建议您将此结构更改为类似以下内容：

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

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