reactjs无法读取未定义的属性'forEach'

Question

我从父元素获取产品数组并尝试使用forEach遍历它。相反，我得到一个错误“Uncaught TypeError：无法读取属性'forEach'未定义在ProductTable.render”。 console.log（行）输出对象的数组。

下面

是我的productTable组件

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {ProductCategoryRow} from './productcategoryrow.js'; 
import {ProductRow} from './productrow.js' 

export class ProductTable extends React.Component {  
    render(){ 
     let rows =[]; 
     let lastcategory = null; 
     this.props.products.forEach(function(product){ 

      if(product.category !== lastcategory){ 
       rows.push(<ProductCategoryRow category = {product.category} key={product.category}/>); 
      } 
      rows.push(<ProductTable product={product} key={product.name}/>); 
      lastcategory = product.category; 

     }); 
     console.log(rows); 
     return(
      <div> 
      <table> 
       <thead> 
        <tr> 
         <td>Name</td> 
         <td>Price</td> 
        </tr> 

         {rows} 

       </thead> 
      </table> 
      </div> 
     ); 
    } 
} 

下面

是它是从道具被传递，其中父组件：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {SearchBar} from './searchbar.js'; 
import {ProductTable} from './producttable.js'; 


class FilterableProductTable extends React.Component{ 
    render(){ 
    return(
      <div> 
      <SearchBar/> 
      <ProductTable products = {this.props.products}/> 
      </div> 
    ); 
    } 
} 

var PRODUCTS = [ 
    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'}, 
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'}, 
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'}, 
    {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'}, 
    {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'}, 
    {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'} 
]; 


ReactDOM.render(<FilterableProductTable products={PRODUCTS} />, document.getElementById('container')); 

Answer 1

里面的forEach循环你做：

<ProductTable product={product} key={product.name}/> 

请注意，您正在设置道具product。然而，ProductTable预计道具products。

由于可变product的值不是数组并且由于不使用任何地方ProductRow我只能假设你想用

<ProductRow product={product} key={product.name}/> 

（ProductRow代替ProductTable）来代替。