TypeError：无法读取未定义的属性“反向”

Question

我有一个关于这个问题的问题

TypeError: 无法读取未定义的属性“反向”

在一个组件内反应。我尝试将异步调用放在 componentDidMount 中，因为此调用连接到另一个异步 api。

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchProducts } from "../../actions";
import M from "materialize-css/dist/js/materialize.min.js";
import { loadStripe } from "stripe";

class MembershipList extends Component {
  async componentDidMount() {
    const products = await this.props.fetchProducts();
    var elems = document.querySelectorAll(".modal");
    var instances = M.Modal.init(elems);
  }

  renderProducts() {
    return this.props.products.reverse().map(product => {
      return (
        <div className="row">
          <div className="col s12 offset-m2 m8  offset-l4 l4">
            <div className="card pink lighten-3 z-depth-5">
              <div className="card-image">
                <img
                  src="/sub.jpg"
                  className="modal-trigger"
                  href="#modal1"
                ></img>
              </div>
            </div>
          </div>
        </div>
      );
    });
  }

  render() {
    return (
      <div>
        {this.renderProducts()}
      </div>
    );
  }
}

function mapstateToProps({ products }) {
  return { products };
}

export default connect(
  mapstateToProps,
  { fetchProducts }
)(MembershipList);

Answer 1

我需要查看您为产品设置的初始值

但似乎在初始渲染时您需要检查产品是否存在，即

 this.props.products && this.props.products.reverse().map(product => {
  ...
 });