Почему мой компонент React не рендерит HTML, а записывает правильно?

Question

Я использую Redux для хранения данных, вызываемых API, и при попытке отобразить их на экране я столкнулся с некоторыми проблемами. По сути, я использую Redux и Fetch для хранения всех извлеченных продуктов из Stripe API в состоянии (prop?), Которое называется "products", его структура выглядит следующим образом:

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

Это не самая эффективная структура, и, вероятно, ее необходимо будет реорганизовать. Однако в данный момент это не проблема, потому что я могу, по крайней мере, вернуть данные, используя console.log(). Реальная проблема - , когда элемент находится внутри .forEach / .map l oop, я не могу отобразить свой компонент или любой 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 вы пытаетесь вернуть массив элементов React, используя метод Array#forEach.

Разница между Array#forEach и чем-то вроде Array#map - возвращаемое значение.

• Метод Array.forEach() не возвращает значение, игнорируя значения, возвращаемые в его обратном вызове.

• Метод Array.map() возвращает массив со значениями, возвращенными его обратным вызовом.

---

Решение

Чтобы исправить вашу проблему, вы должны заменить Array#forEach с Array#map:

Object.entries(props.products).forEach

со следующим:

Object.entries(props.products).map