基于prop名称ReactJS映射数组 [英] map over a array based on prop name, ReactJS

问题描述

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

I am trying to map over one of the two arrays from my imported js file ProductInformation.js.

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

This is in my main component class <ProductSquare arrayId = {door}/> I have also tried <ProductSquare arrayId = {['door']}/>

我是什么尝试做的只是映射与 panelId prop变量匹配的数组（在两个中）。

What I am trying to do is only map the array (out of the two) which matches the panelId prop variable.

我收到错误 TypeError：无法读取未定义的属性'map'

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;

推荐答案

正如艾伦指出的那样，我认为主要的问题是当你指的是这个，它没有绑定到主要组件。对于不属于标准React组件生命周期的函数（构造函数，渲染， componentDidMount 等），你必须明确声明你将它绑定到这样的组件

As Alan pointed out, I think the main problem is that when you are referring to this, it is not bound to the main component. For functions that are not part of the standard React component lifecycle (constructor, render, componentDidMount, etc), you must explicitly state that you bind it to the component like this

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

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

这本身就可以解决你所面临的直接问题。

That by itself should resolve the immediate problem you are facing.

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

In addition, I would point out a few things that would make your component a little bit easier to read. For example, having the internal function PopulateProductSquares start with a capital letter, makes us think that it is a Class or Component, so I would rename that populateProductSquares (or renderProductSquares in my personal opinion to indicate what it does).

其次，当您循环浏览产品时，您不需要引用 this.props.arrayId [i] ，因为每个对象已经作为<$ c $传递当您使用 map （product，i）=> 中的c> product 参数c>。

Secondly, when you are looping through the products, you don't need to refer to this.props.arrayId[i] since each object is already passed as the product argument in the function (product, i) => when you use map.

你不需要从中分配结果this.props.arrayId.map（...）到一个常数，因为你马上就回来了。

And you don't need to assign the result from this.props.arrayId.map(...) to an constant since you are returning it right away.

最后，因为你在渲染中唯一做的事情方法是调用 PopulateProductSquares 函数，将它分成单独的函数是没有意义的，你可以把它全部写成di直接在渲染（正如Alan也指出的那样）。但是有很多有用的情况你想要将它放在一个单独的函数中，所以我认为理解绑定函数的要求很重要。

Lastly, since the only thing you are doing in the render method is to call the PopulateProductSquares function, it doesn't make sense to separate it into a separate function, you could just write it all directly in render (as Alan also pointed out). But there are a lot of useful cases where you do want to have it in a separate function, so I think it is important to understand the requirement for binding functions.

To总结一下，这就是我可能做到的方式（稍微不同的渲染函数来展示你何时可能需要单独的函数）。

To summarise, here is how I might have done it (with a slightly different render function to showcase when you might want to have separate functions).

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;

这篇关于基于prop名称ReactJS映射数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！