Javascript 为什么我的React组件没有呈现HTML，而是正确地记录日志？

我正在使用Redux存储一些称为数据的API，在尝试将其呈现到屏幕时，遇到了一些问题。基本上，我使用Redux和Fetch来存储所有被拉入称为“产品”的状态（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);

从“React”导入React；
从'react redux'导入{connect}；
从“./Items/ProductListItem”导入ProductListItem
从“../../../\u选择器/products.selector”导入selectProducts；
const ProductList=（道具）=>(
条带产品列表//打印到屏幕上
{
Object.entries（props.products）.forEach（元素=>{
返回元素[1]。items.map（（产品）=>{
//console.log（产品）{
返回{
产品：选择产品（state.productsById）
};
};
导出默认连接（MapStateTops）（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;

从“React”导入React；
从'react router dom'导入{Link}；
const ProductListItem=（{id，name，metadata}）=>(
${metadata.price_start}
/钼
{name}
{metadata.service_description}

);
导出默认ProductListItem；

那么它给出了什么呢？它记录了正确的数据，但不会输出任何HTML。当我用一些简单的东西替换

return

行时，我甚至无法得到要返回的

标记，比如：
returntest

我对React和Redux相当陌生。非常感谢您的帮助。
在JSX中，您试图使用
数组#forEach
方法返回React元素数组

和之间的区别是返回值


Array.forEach（）
方法不返回值，忽略其回调中返回的值

Array.map（）



解决方案
要解决您的问题，您应替换为：

以下是：

Object.entries(props.products).map

Object.entries(props.products).map