[英]why my shopping cart not re-render after the change the state of the product
index.js索引.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import "bootstrap/dist/css/bootstrap.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./reducer";
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
App.js应用程序.js
import React, { Component } from "react";
import "./App.css";
import Router from "./Router";
class App extends Component {
render() {
return (
<div className="App">
<div>
<h1>React-Redux Store</h1>
<h2>Welcome to the React Store</h2>
</div>
<Router />
</div>
);
}
}
export default App;
ShopHome.js商店首页.js
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { addToCart } from "./action_type";
class ShopHome extends Component {
render() {
return (
<div>
<table className="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>
<NavLink to="/myCart" exact activeStyle={{ color: "green" }}>
<a href="#">my cart</a>
</NavLink>
</th>
</tr>
</thead>
<tbody>
{this.props.items.map(item => {
return (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.description}</td>
<td>${item.price}</td>
<button onClick={this.props.addToCart(item.id)}>
add to cart
</button>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}
const mapStateToProps = state => {
return {
items: state.items
};
};
const mapDispatchToProps = dispatch => {
return {
addToCart: id => {
dispatch(addToCart(id));
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ShopHome);
ShopCart.js购物车.js
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { addQuantity } from "./action_type";
class ShopCart extends Component {
render() {
let addedItems = this.props.items.map(item => {
return (
<tr key={item.id}>
<td>{item.name}</td>
<td>
<NavLink to="/myCart">
<i
class="glyphicon glyphicon-plus-sign"
onClick={this.props.addQuantity(item.id)}
></i>
{item.quantity}
<i
class="glyphicon glyphicon-minus-sign"
onClick={this.props.handleSubtractQuantity(item.id)}
></i>
</NavLink>
</td>
<td>${item.price}</td>
</tr>
);
});
return (
<div>
<table className="table">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>
<NavLink to="/" exact activeStyle={{ color: "green" }}>
<a href="#">back to store</a>
</NavLink>
</th>
</tr>
</thead>
<tbody>{addedItems}</tbody>
</table>
</div>
);
}
}
const mapStateToProps = state => {
return {
items: state.addedItems
};
};
const mapDispatchToProps = dispatch => {
return { addQuantity: id => dispatch(addQuantity(id)) };
};
export default connect(mapStateToProps, mapDispatchToProps)(ShopCart);
reducer.js减速器.js
const initialState = {
items: [
{
id: 1,
name: "apple",
description: "Eat One Every Day, may keep the doctor away",
price: 12
},
{
id: 2,
name: "grape",
description: "Wine is great, but grapes is better",
price: 11
},
{
id: 3,
name: "pineapple",
description: "enjoy but don`t forget to peer first",
price: 8
}
],
addedItems: []
};
const reducer = (state = initialState, action) => {
if (action.type === "ADD_TO_CART") {
let addedItem = state.items.find(item => item.id === action.id);
let existed_item = state.addedItems;
if (existed_item) {
addedItem.quantity++;
} else {
addedItem.quantity = 1;
}
return {
...state,
addItems: [...state.addedItems, addedItem]
};
}
if (action.type === "ADD_QUANTITY") {
let addedItem = state.items.find(item => item.id === action.id);
addedItem.quantity++;
}
return {
...state
};
};
export default reducer;
action_type.js action_type.js
export const addToCart = id => {
return {
type: "ADD_TO_CART",
id
};
};
export const addQuantity = id => {
return {
type: "ADD_QUANTITY",
id
};
};
Router.js路由器.js
import React from "react";
import { Switch, Route } from "react-router-dom";
import ShopHome from "./shopHome";
import ShopCart from "./shopCart";
import { BrowserRouter } from "react-router-dom";
const Router = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={ShopHome} />
<Route exact path="/myCart" component={ShopCart} />
</Switch>
</BrowserRouter>
);
};
export default Router;
Hi everyone, I am new to react-redux, I am trying to setting up a shopping cart website, I have a main shopping cart page which host on localhost:3000, and once i pressed the my cart, will be route to /myCart, however, my problem is when i select the item and add to cart, and newest added item in the ShopCart component won't be rendered in my cart, I am not sure where i did wrong, can someone give me a hand?大家好,我是 react-redux 的新手,我正在尝试建立一个购物车网站,我有一个主购物车页面,它托管在 localhost:3000 上,一旦我按下我的购物车,就会被路由到 /myCart ,但是,我的问题是当我选择项目并添加到购物车时,ShopCart 组件中最新添加的项目不会在我的购物车中呈现,我不确定我哪里做错了,有人可以帮我吗?
I supposed ideally when i clicked the add to cart in the ShopHome.js, will trigger the addToCart function, then through the dispatcher, with action.type= "ADD_TO_CART" and id=item.id, then in the reducer, i want the quantity of selected item plus 1,However, when i pressed add to cart, and hit my cart, nothing is added.我想理想情况下,当我在 ShopHome.js 中单击添加到购物车时,将触发 addToCart 函数,然后通过调度程序,使用 action.type="ADD_TO_CART" 和 id=item.id,然后在减速器中,我想要所选项目的数量加 1,但是,当我按下添加到购物车并点击我的购物车时,没有添加任何内容。
First, you have a typo in your reducer.首先,你的减速器有一个错字。
addItems: [...state.addedItems, addedItem]
It should be addedItems: [...state.addedItems, addedItem]
addItems: [...state.addedItems, addedItem]
应该是addedItems: [...state.addedItems, addedItem]
Next, you should rewrite the logic for ADD_TO_CART
.接下来,您应该重写ADD_TO_CART
的逻辑。
let existed_item = state.addedItems;
if (existed_item) {
addedItem.quantity++;
} else {
addedItem.quantity = 1;
}
You assigning existed_item
to state.addedItems
which is an array, so existed_item
will always be true and it will try to increment a property that does exist.您将existed_item
分配给existed_item
. state.addedItems
,它是一个数组,因此existed_item
将始终为true,并且它将尝试增加确实存在的属性。
Instead, change existed_item = state.addedItems
to existed_item = state.addedItems.find(x=>x.id === action.id)
.相反,将existed_item = state.addedItems
. existed_item = state.addedItems.find(x=>x.id === action.id)
更改为existed_item = state.addedItems.find(x=>x.id === action.id)
。 If this item exists, increment, otherwise, add quantity = 1
.如果此项存在,则增加,否则,增加quantity = 1
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.