【问题标题】：Why is my React Component Not Rendering HTML, but logs correctly?为什么我的 React 组件不呈现 HTML，但正确记录？
【发布时间】：2020-08-10 12:42:56
【问题描述】：

我正在使用 Redux 来存储一些 API 调用的数据，并且在尝试将其呈现到屏幕上时，我遇到了一些问题。基本上，我使用 Redux 和 Fetch 将所有拉取的 Products from the Stripe API 存储到一个名为“products”的状态（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。当我用简单的东西替换return <ProductListItem key={product.id} {...product} /> 行时，我什至无法返回<p> 标签，例如：return <p>test</p>。

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

【问题讨论】：

标签： javascript reactjs redux react-component

【解决方案1】：

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

Array#forEach 和 Array#map 之类的区别在于返回值。

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

解决方案

要解决您的问题，您应该将Array#forEach 替换为Array#map：

Object.entries(props.products).forEach

以下内容：

Object.entries(props.products).map

【讨论】：