时间戳

首页 > 解决方案 > 根据道具名称映射数组，ReactJS

javascript - 根据道具名称映射数组，ReactJS

问题描述

我正在尝试从我导入的 js 文件中映射两个数组之一ProductInformation.js。

<ProductSquare arrayId = {door}/> 这是在我也尝试过的主要组件类中<ProductSquare arrayId = {['door']}/>

我要做的只是映射与panelIdprop 变量匹配的数组（两者中的一个）。

我得到一个错误TypeError: Cannot read property 'map' of undefined

export const door = [
  {
    id: 1,
    productSquareId: 'door',
    productImage: require('./door.png'),
    companyImage: require('./logo.png'),
    price: '$55.99',

  },
  {
    id: 2,
    productSquareId: 'door',
    productImage: require('./door.png'),
    companyImage: require('./logo.png'),
    price: '$55.99',

  },
  ]
  
  export const lighting = [
  {
    id: 1,
    productSquareId: 'lighting',
    productImage: require('./lighting.png'),
    companyImage: require('./logo.png'),
    price: '$55.99',

  }

import React, { Component } from 'react';
import './ProductSquare.css';
import './grid-container.css'
import  {door, lighting} from './ProductInformation.js';


class ProductSquare extends Component {

constructor(props)
{
  super(props)
    this.state = {
    };
}

PopulateProductSquares()
{

  const ProductSquares = this.props.arrayId.map((product, i) =>
    <div className = "ProductSquare">
    <img  className = "MainImage" src ={this.props.arrayId[i].productImage}  alt = "test"/>
    <img  className = "CompanyImage" src ={this.props.arrayId[i].companyImage} alt = "test"/>

      <button className = "AddButton">
        Add 
      </button>

      <button className = "InfoButton">
        Info
      </button>

    </div>
  )

  return (
     ProductSquares
  )
}


  render() {
    return (
      this.PopulateProductSquares()
    )

}
}

export default ProductSquare;

标签： javascriptreactjs

解决方案

正如 Alan 指出的那样，我认为主要问题是当您提到 时this，它并没有绑定到主要组件。对于不属于标准 React 组件生命周期（、、、constructor等render）的componentDidMount函数，您必须明确声明将其绑定到组件，如下所示

constructor(props)
{
  super(props)
    this.state = {};

    this.PopulateProductSquares = this.PopulateProductSquares.bind(this);
}

这本身应该可以解决您面临的直接问题。

此外，我会指出一些可以使您的组件更易于阅读的内容。例如，让内部函数PopulateProductSquares以大写字母开头，让我们认为它是一个类或组件，所以我会重命名它populateProductSquares（或者renderProductSquares在我个人看来以表明它的作用）。

其次，当你循环遍历产品时，你不需要引用，this.props.arrayId[i]因为每个对象product在(product, i) =>你使用map.

而且您不需要将结果分配给this.props.arrayId.map(...)常量，因为您会立即返回它。

最后，由于您在该方法中唯一要做的render就是调用该PopulateProductSquares函数，因此将其分成一个单独的函数是没有意义的，您可以直接将其全部写入render（正如 Alan 也指出的那样）。但是在很多有用的情况下，您确实希望将它放在单独的函数中，因此我认为了解绑定函数的要求很重要。

总而言之，我可能会这样做（使用稍微不同的渲染函数来展示您何时可能想要拥有单独的函数）。

class ProductSquare extends Component {

  constructor(props)
  {
    super(props)
    this.state = {};

    this.renderProductSquares = this.renderProductSquares.bind(this);
  }

  renderProductSquares()
  {
    return this.props.arrayId.map((product, i) =>
      <div className = "ProductSquare" key={i}>
        <img  className = "MainImage" src ={product.productImage}  alt = "test"/>
        <img  className = "CompanyImage" src ={product.companyImage} alt = "test"/>

        <button className = "AddButton">
          Add 
        </button>

        <button className = "InfoButton">
          Info
        </button>
      </div>
    );
  }

  render() {
    return (
      <div>
        <h1>Here are a bunch of product squares</h1>
        {this.renderProductSquares()}
      </div>
    );
  }
}

export default ProductSquare;

推荐阅读