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

Question

我正在使用 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...
}

这不是最有效的结构，可能需要重构。然而，这不是目前的问题，因为我至少可以 return 使用 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，例如：return <p>test</p>.

我对 React 和 Redux 还很陌生。感谢任何帮助。

Answer 1

在 JSX 中，您正在尝试 return 使用 Array#forEach 方法的 React 元素数组。

Array#forEach and something like Array#map 之间的差异是 returning 值。

Array.forEach() 方法没有 return 值，忽略在其回调中 return 的值。
Array.map() 方法 return 是一个数组，其值 return 来自其回调。

解决方案

要解决您的问题，您应该替换 Array#forEach with Array#map:

Object.entries(props.products).forEach

具有以下内容：

Object.entries(props.products).map

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

Why is my React Component Not Rendering HTML, but logs correctly?

javascript

reactjs

redux

react-component

解决方案