使用react / redux调用的最大堆栈大小

Question

I think I know what the problem is, but I am not sure how to fix it. I am wanting my state to update each time an "action/event/whatever" happens. I am trying to use componentWillReceiveProps, but then it's like my code goes into a never ending loop for some reason.

I have put two functions inside of this componentWillReceiveProps to be fire off each time something happens that way they will update. I will post the code here:

Just for information cart is an object that contains objects inside of it. It gets more items if people so choose to add them and it can delete those items also.

Component:

import React , { Component } from 'react';
import * as actions from '../../actions/cartActions';
import {Modal, Button} from 'react-bootstrap';
import {connect} from 'react-redux';
import _ from 'lodash';

class Cart extends Component {
  constructor() {
    super();
    this.state = {
      showModal: false,
    }

    this.getTotalAmount = this.getTotalAmount.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props.price);
    this.getTotalAmount(nextProps.cart);
    this.getTotalQuantity(nextProps.cart);
    return true;
  }

  open() {
    this.setState({
      showModal: true
    });
  }

  close() {
    this.setState({
      showModal: false
    });
  }

  getTotalAmount(cart) {
    this.props.addTotal(cart);
  }

  getTotalQuantity(cart) {
    this.props.getTotalQuantity(cart);
  }

  onDelete(_id) {
    this.props.deleteCartItem(_id);
  }

  onIncrement(_id) {
    this.props.updateCart(_id, 1);
  }

  onDecrement(_id, quantity) {
    if(quantity > 1) {
      this.props.updateCart(_id, -1)
    }
  }

  renderCart() {
    if(Object.keys(this.props.cart).length > 0) {
      const cartItemList = _.map(this.props.cart, (cartItem) => {
        return (
          <div key={cartItem._id} className="panel-body">
            <div className="well">
              <div className="row">
                <div className="col-xs-12 col-sm-2">
                  <h6>{cartItem.title}</h6><span>    </span>
                </div>
                <div className="col-xs-12 col-sm-2">
                  <h6>usd. {cartItem.price}</h6>
                </div>
                <div className="col-xs-12 col-sm-2">
                  <h6>qty. <label className="label label-success">{cartItem.quantity}</label></h6>
                </div>
                <div className="col-xs-6 col-sm-4">
                  <div className="btn-group" role="group">
                    <button
                      onClick={this.onDecrement.bind(this, cartItem._id, cartItem.quantity)}
                      className="btn btn-default btn-sm"
                    >-</button>
                    <button
                      onClick={this.onIncrement.bind(this, cartItem._id)}
                      className="btn btn-default btn-sm"
                    >+</button>
                    <span>     </span>
                    <button onClick={this.onDelete.bind(this, cartItem._id)} className="btn btn-danger btn-sm">Delete</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      });
      return (
        <div className="panel-group">
          <div className="panel panel-primary">
            <div className="panel-heading">Cart</div>
            {cartItemList}
            <div className="row panel-body">
              <div className="col-xs-12">
                <h6>Total amount: {this.state.price.total}</h6>
                <button onClick={this.open.bind(this)} className="btn btn-success btn-sm">
                  PROCEED TO CHECKOUT
                </button>
              </div>
            </div>
            <Modal show={this.state.showModal} onHide={this.close.bind(this)}>
              <Modal.Header closeButton>
                <Modal.Title>Thank you!</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <h6>Your order has been saved</h6>
                <p>You will receive an email confirmation</p>
              </Modal.Body>
              <Modal.Footer>
                <div className="col-xs-6">
                  <h6>total $:</h6>
                </div>
                <Button onClick={this.close.bind(this)}>Close</Button>
              </Modal.Footer>
            </Modal>
          </div>
        </div>
      );
    } else {
      return (
        <div></div>
      );
    }
  }
  render() {

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

function mapStateToProps(state){
  return {
    cart: state.cart,
    price: state.price
  };
}

export default connect(mapStateToProps, actions)(Cart);

Actions:

export function addTotal(cart) {
  return {
    type: "ADD_TOTAL_PRICE",
    payload: cart
  }
}
export function getTotalQuantity(cart) {
  return {
    type: "ADD_QUANTITY",
    payload: cart
  }
}

reducers:

import _ from 'lodash';

export default function(state = [], action) {
  switch(action.type) {
    case "ADD_TOTAL_PRICE":
    let totalAmount = _.map(action.payload, (item) => {
      return item.quantity * item.price;
    }).reduce(function(a, b) {
      return a + b;
    }, 0).toFixed(2);
    return {...state, total: totalAmount}
    break;
    case "ADD_QUANTITY":
    let totalQuantity = _.map(action.payload, (item) => {
      return item.quantity;
    }).reduce(function(a, b) {
      return a + b;
    }, 0);
    return {...state, quantity: totalQuantity};
  }
  return state;
}

Answer 1

When you have function calls in componentWillReceiveProps , you generally need to have conditional logic around them so that they're only called if specific props are actually changing. Typically, this looks like:

if(this.props.someProp !== nextProps.someProp) {
    // call some function only when the prop has changed
}

In your case, you're dispatching a Redux action every time the component receives any props, that dispatch causes a React re-render, and that repeats the cycle.