javascript - 映射基于 Prop 名称的数组，ReactJS

Question

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

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

我想做的只是映射与 panelId 匹配的数组(两个数组中的一个) Prop 变量。

我得到一个错误 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;

Answer 1

正如 Alan 所指出的，我认为主要问题是当您指的是 this 时，它不绑定(bind)到主要组件。对于不属于标准 React 组件生命周期的函数(constructor、render、componentDidMount 等)，您必须明确声明将其绑定(bind)到组件，就像这样

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 里(正如艾伦也指出的那样)。但是在很多有用的情况下，您确实希望将它放在一个单独的函数中，所以我认为了解绑定(bind)函数的要求很重要。

总而言之，我可能是这样做的(使用略有不同的渲染函数来展示您何时可能需要单独的函数)。

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;