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")
);
App.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);
reducer.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
};
};
Router.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;
Привет всем, я новичок в реагировать на избыточность, я пытаюсь настроить веб-сайт корзины покупок, у меня есть главная страница корзины покупок, которая размещается на localhost: 3000, и после того, как я нажму свою корзину, будет маршрут к / myCart Тем не менее, моя проблема в том, что когда я выбираю элемент и добавляю его в корзину, а новый добавленный элемент в компоненте ShopCart не будет отображаться в моей корзине, я не уверен, где я ошибся, может кто-нибудь дать мне руку?
Я предположил, что в идеале, когда я нажму кнопку «Добавить в корзину» в ShopHome.js, вызовет функцию addToCart, затем через диспетчер, с action.type = "ADD_TO_CART" и id = item.id, затем в редукторе, я хочу количество выбранного элемента плюс 1, однако, когда я нажал добавить в корзину, и ударил мою корзину, ничего не добавляется.
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
, который является массивом, поэтому existed_item
всегда будет истинным, и он попытается увеличить свойство, которое существует.
Вместо этого измените existed_item = state.addedItems
на existed_item = state.addedItems.find(x=>x.id === action.id)
. Если этот элемент существует, увеличьте, в противном случае добавьте quantity = 1
.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.