0
問題の内容はわかっていると思いますが、修正方法がわかりません。私は自分の状態が毎回「行動/イベント/何が起こっても」起こることを望んでいる。私はcomponentWillReceivePropsを使用しようとしていますが、それから私のコードが何らかの理由で終わりのないループに入るようなものです。react/reduxを使用して呼び出される最大スタックサイズ
私は、このコンポーネントの内部に2つの機能を実装しています.WillReceivePropsは、何か起こるたびに更新されます。私はここにコードを掲示します：
ちょうど情報のためのカートは、その中にオブジェクトを含むオブジェクトです。それは人々がそれらを追加することを選択し、それらのアイテムも削除することができる場合、より多くのアイテムを取得します。
コンポーネント：
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);
アクション：
export function addTotal(cart) {
return {
type: "ADD_TOTAL_PRICE",
payload: cart
}
}
export function getTotalQuantity(cart) {
return {
type: "ADD_QUANTITY",
payload: cart
}
}
レデューサー：
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;
}