时间戳

首页 > 解决方案 > 如何根据 React 中导入的数据传递不同的值？

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

问题描述

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

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

必须要做，但是用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',
      },
],
},
];

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;

类别.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;

对不起，谢谢你的长问题。

标签： javascriptreactjsreact-props

解决方案

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

首先是您setState在组件中调用内部渲染Category，这会导致无限循环。相反，如果使用功能组件，则setState在生命周期方法中调用componentDidMount或使用useEffect钩子。

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

在您setState提到的电话中_renderProduct()，应该this._renderProduct()改为。

现在这里的主要问题是你的数据结构/你如何渲染这个结构。

Products是一个对象数组，其中每个对象都有一个DeliveryorHouseholdGoods属性，它是一个产品数组。我建议您将此结构更改为更像这样的结构：

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组件内的道具，而是应该执行以下操作：

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

示例沙箱

推荐阅读