为什么我的React组件未呈现HTML，但日志正确？

Question

我正在使用Redux来存储一些称为API的数据，在尝试将其呈现到屏幕上时，遇到了一些问题。基本上，我使用Redux和Fetch将所有提取的Products from the Stripe API存储到称为“产品”的状态（prop？）中，其结构如下所示：

{ products:
  product1ID: {
    items: [
      0: {json data from Stripe Product API}
    ]
  },
  product2ID: {
    items: [
      0: {json data from Stripe Product API}
    ]
  },
  etc...
}

这不是最有效的结构，可能需要重构。但是，目前这不是问题，因为至少可以使用console.log()返回数据。 真正的问题是，当元素位于.forEach / .map循环中时，我无法在页面上呈现组件或任何HTML。这是我的“ ProductList”组件，它分解了上面的结构：

import React from 'react';
import { connect } from 'react-redux';
import ProductListItem from './Items/ProductListItem'
import selectProducts from '../../../_selectors/products.selector';


const ProductList = (props) => (
  <div>
    <h1>Stripe Product List</h1> //This Prints to Screen
    {
      Object.entries(props.products).forEach(element => {
        return element[1].items.map((product) => {
          //console.log(product)  <-- this logs the json API data correctly! However, nothing prints to screen using HTML elements below!
          return <ProductListItem key={product.id} {...product} /> //This does not display!!! Why?
        })
      })
    }
  </div>
);


const mapStateToProps = (state) => {
  return {
    products: selectProducts(state.productsById)
  };
};

export default connect(mapStateToProps)(ProductList);

这里是ProductListItem，以防万一，您需要它：

import React from 'react';
import { Link } from 'react-router-dom';

const ProductListItem = ({ id, name, metadata }) => (
  <Link to={`/memberships/${id}`} className="membership red">
    <div className="membership__price">
      <span className="membership__price_price-label">${metadata.price_start}</span>
      <span className="membership__price_mo-label">/mo</span>
    </div>
    <div className="membership__info">
      <h2>{name}</h2>
      <p>{metadata.service_description}</p>
    </div>
  </Link>
);

export default ProductListItem;

那有什么作用？它记录正确的数据，但不会输出任何HTML。当我用简单的内容替换<p>行时，甚至无法获得return <ProductListItem key={product.id} {...product} />标记返回，例如：return <p>test</p>。

我对React和Redux还是陌生的。任何帮助表示赞赏。

Answer 1

在JSX中，您尝试使用Array#forEach方法返回一个React元素数组。

Array#forEach与类似Array#map之类的差异是返回值。

• Array.forEach方法不返回值，而忽略其回调中返回的值。

• Array.map()方法返回一个数组，其中包含从其回调返回的值。

---

要解决您的问题，您应该替换

Object.entries(props.products).forEach

带有以下内容：

Object.entries(props.products).map