redux TypeError:无法读取未定义的属性“reverse”

idv4meu8  于 2023-08-05  发布在  其他
关注(0)|答案(1)|浏览(119)

关于这个问题我有一个问题
TypeError:无法读取未定义的属性“reverse”
在React部件内部。我尝试将异步调用放在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);

字符串

z4bn682m

z4bn682m1#

我需要看看你为产品设定的初始值。
但是在最初的渲染中,你需要检查产品是否存在。

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

字符串

相关问题