javascript - 为什么我的购物车在更改产品状态后没有重新渲染
问题描述
index.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")
);
应用程序.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
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
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);
减速器.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
export const addToCart = id => {
return {
type: "ADD_TO_CART",
id
};
};
export const addQuantity = id => {
return {
type: "ADD_QUANTITY",
id
};
};
路由器.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;
大家好,我是 react-redux 的新手,我正在尝试建立一个购物车网站,我有一个主购物车页面,托管在 localhost:3000 上,一旦我按下我的购物车,将被路由到 /myCart ,但是,我的问题是当我选择商品并添加到购物车时,ShopCart 组件中最新添加的商品不会呈现在我的购物车中,我不确定我在哪里做错了,有人可以帮帮我吗?
我想理想情况下,当我单击 ShopHome.js 中的添加到购物车时,将触发 addToCart 函数,然后通过调度程序,使用 action.type=“ADD_TO_CART”和 id=item.id,然后在减速器中,我想要所选项目的数量加 1,但是,当我按下添加到购物车并点击我的购物车时,什么都没有添加。
解决方案
首先,您的减速器中有错字。
addItems: [...state.addedItems, addedItem]
它应该是addedItems: [...state.addedItems, addedItem]
接下来,您应该重写ADD_TO_CART
.
let existed_item = state.addedItems;
if (existed_item) {
addedItem.quantity++;
} else {
addedItem.quantity = 1;
}
您分配existed_item
给state.addedItems
which 是一个数组,因此existed_item
将始终为真,它将尝试增加一个确实存在的属性。
相反,更改existed_item = state.addedItems
为existed_item = state.addedItems.find(x=>x.id === action.id)
. 如果此项存在,则递增,否则,添加quantity = 1
。
推荐阅读
- java - 运行 Dockerfile 时如何连接到 db?
- python - Azure Functions - 如何使用 API 连接连接到其他服务
- visual-studio - 如何更改我的 ssh 目标(远程资源管理器扩展)VSCode 的根文件夹
- excel - 在 CSV 中的列组合之间添加字符
- .net - 在 MVC 中找不到文件
- php - 如何测试函数中是否存在变量
- c# - 一个数组是否包含使用 c# 的另一个数组 Mongodb 中的任何值
- python - 如何在python中使图像的像素达到特定半径
- spring - 从 spark 调用服务方法
- powershell - 使用 Powershell 添加打印机