Javascript 从react组件呈现数据时出现问题-建议？

我正在做一个简单的react项目，并试图创建一个产品表及其各自的价格。在我的

ProductRow

组件中，我使用

forEach（）

方法循环我的产品数据并返回产品的名称，然后这些名称应该在父

ProductTable

组件中呈现，除非它不是。有什么建议吗？代码如下：

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

class SearchBar extends React.Component{
  render(){
    return(
    <div>
      <input type = 'text' placeholder = 'Search'/>
    </div>
    )
  }
}

class ProductTable extends React.Component{
  render(){
    return(
      <div>
        <table>
          <tr>
            <th>name</th>
            <th>price</th>
          </tr>
        <ProductRow products = {this.props.products}/>
         </table>
      </div>
    )
  }
}

class ProductRow extends React.Component{
  render(){
    const items = this.props.products
    return(
      <tr>
        {
          items.forEach(x=> {
           return <td>{x.name}</td>
          })
        }
      </tr>
    )
  }
}

const 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')
);

类FilterableProductTable扩展了React.Component{
render（）{
返回(
)
}
}
类SearchBar扩展了React.Component{
render（）{
返回(
)
}
}
类ProductTable扩展了React.Component{
render（）{
返回(
名称
价格
)
}
}
类ProductRow扩展了React.Component{
render（）{
const items=this.props.products
返回(
{
items.forEach（x=>{
返回{x.name}
})
}
)
}
}
常数乘积=[
{类别：'体育用品'，价格：'$49.99'，库存：真实，名称：'足球'}，
{类别：'体育用品'，价格：'$9.99'，库存：真实，名称：'棒球'}，
{类别：'体育用品'，价格：'$29.99'，库存：假，名称：'篮球'}，
{类别：'Electronics'，价格：'99.99美元'，库存：真实，名称：'iPod Touch'}，
{类别：'Electronics'，价格：'399.99美元'，库存：假，名称：'iphone5'}，
{类别：'Electronics'，价格：'$199.99'，库存：true，名称：'Nexus 7'}
];
ReactDOM.render(
,
document.getElementById（'容器'）
);

使用

map

而不是

forEach

有关详细答案，请参阅以下文章：

它使用.map（）从给定函数的结果创建一个新数组，而不损害原始数组

---

使用

map

而不是

forEach

有关详细答案，请参阅以下文章：

它使用.map（）从给定函数的结果创建一个新数组，而不损害原始数组

---

使用

Map

而不是

forEach

，因为它返回数组，而

forEach

不返回任何内容

• forEach

  通常在数组中执行循环时使用，请将其视为

  对

  循环的替代

• map

  创建一个新数组，其中填充了对调用数组中的每个元素调用所提供函数的结果

class-ProductRow扩展了React.Component{
render（）{
const items=this.props.products
返回(
{
items.map（x=>{
返回{x.name}
})
}
)
}
}

使用

Map

而不是

forEach

，因为它返回一个数组，而

forEach

不返回任何内容

• forEach

  通常在数组中执行循环时使用，请将其视为

  对

  循环的替代

• map

  创建一个新数组，其中填充了对调用数组中的每个元素调用所提供函数的结果

class-ProductRow扩展了React.Component{
render（）{
const items=this.props.products
返回(
{
items.map（x=>{
返回{x.name}
})
}
)
}
}

使用

map

代替

forEach

-forEach不返回任何内容，而

map

应返回jsx元素。使用

map

代替

forEach

-forEach不返回任何内容，而

map

应返回jsx元素。嘿，谢谢！我得到了数据渲染，但不是每个项目都在自己的行中，而是将所有项目渲染为一个大行，如下所示：

足球棒球篮球iPod Touch iPhone 5 Nexus 7

关于如何在自己的行中获取每个项目有什么想法吗？干杯请使用tr而不是td，然后为

x.name

嘿，谢谢！我得到了数据渲染，但不是每个项目都在自己的行中，而是将所有项目渲染为一个大行，如下所示：

足球棒球篮球iPod Touch iPhone 5 Nexus 7

关于如何在自己的行中获取每个项目有什么想法吗？干杯使用tr而不是td，然后用于

x.name

class ProductRow extends React.Component{
  render(){
    const items = this.props.products
    return(
      <tr>
        {
          items.map(x=> {
           return <td>{x.name}</td>
          })
        }
      </tr>
    )
  }
}