问题描述
“我的产品”组件通过映射的道具和调度连接到状态。从Products.js调用fetchProducts（）应该调度“ FETCH_PRODUCTS”操作（和console.log（“由产品操作触发”）并将数据作为有效载荷发送到Product Reducer），这反过来又会增加从中获取的数据（产品）声明“ data.json”（也应该声明为console.log（“从products reducer发射”）），这又被假定为通过props.products或products将其提供给Products组件。来自Products.js的Console.logging（fetchProducts（））记录其功能定义，该功能定义位于productActions.js中，我相信这是问题所在。
console.log（fetchProducts（））
dispatch => {
console.log('Fired from product actions');
dispatch({
type: _components_types__WEBPACK_IMPORTED_MODULE_0__["FETCH_PRODUCTS"],payload: data
});
}
Products.js
import React,{ useState,useEffect } from "react";
import { Fade,Zoom } from "react-reveal";
import Modal from "react-modal";
import { connect } from "react-redux";
import fetchProducts from "../actions/productActions";
const Products = ({ props,products,add }) => {
const [product,setProduct] = useState(null);
const openModal = (product) => {
setProduct(product);
};
const closeModal = () => {
setProduct(null);
};
fetchProducts()
useEffect(() => {
},[]);
const renderProducts = () => {
return products.map((product) => {
return (
<li key={product._id}>
<a href={"#" + product._id} onClick={() => openModal(product)}>
<img src={product.image} />
</a>
<p>
<a href="#">{product.title}</a>
</p>
<p>
<strong>${product.price}.00</strong>
</p>
<button onClick={() => add(product)}>ADD TO CART</button>
</li>
);
});
};
return (
<div>
<Fade bottom cascade>
<ul>{!products ? <div>Loading...</div> : renderProducts()}</ul>
</Fade>
{product && (
<Modal isOpen={true}>
<Zoom clear cascade>
<div>
<p onClick={() => closeModal()}>X CLOSE</p>
<img src={product.image} />
</div>
<div>
<p>{product.title}</p>
<p>${product.price}.00</p>
Sizes
<p>
Available Sizes
{product.availableSizes.map((size) => {
return (
<>
<br />
<span> {size} </span>
</>
);
})}
</p>
<button
onClick={() => {
add(product);
closeModal();
}}
>
ADD TO CART
</button>
</div>
</Zoom>
</Modal>
)}
</div>
);
};
const mapStatetoProps = state => {
return {
products: state.products.items
}
}
const mapdispatchToProps = () => {
return{
fetchProducts
}
}
export default connect(mapStatetoProps,mapdispatchToProps())(Products);
productActions.js
import { FETCH_PRODUCTS } from "../components/types";
const data = require('../data.json')
const fetchProducts = () => (dispatch) => {
console.log('Fired from product actions')
dispatch({
type: FETCH_PRODUCTS,payload: data
})
}
export default fetchProducts
productReducer.js
const { FETCH_PRODUCTS } = require("../components/types");
const productsReducer = (state = {},action) =>{
switch(action.type){
case FETCH_PRODUCTS:
console.log('Fired from product reducers')
return {items: action.payload}
default:
return state;
}
}
export default productsReducer;
store.js
import {createStore,applyMiddleware,compose,combineReducers } from "redux";
import thunk from "redux-thunk";
import productsReducer from "./reducers/productReducers";
const initialState = {};
const composeEnhancer = window.__Redux_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(combineReducers({
products: productsReducer,}),initialState,composeEnhancer(applyMiddleware(thunk))
)
export default store;
data.json
{
"products": [
{
"_id": "dress1","image": "/images/dress1.jpeg","title": "Dress 1","description": "about dress 1","availableSizes": ["S","M","L","XL"],"price": 30.0
},{
"_id": "dress2","image": "/images/dress2.jpeg","title": "Dress 2","description": "about dress 2","price": 50.0
},{
"_id": "dress3","image": "/images/dress3.jpeg","title": "Dress 3","description": "about dress 3","XL","M"],"price": 10.0
},{
"_id": "dress4","image": "/images/dress4.jpeg","title": "Dress 4","description": "about dress 4","XXL"],"price": 150.0
},{
"_id": "dress5","image": "/images/dress5.jpeg","title": "Dress 5","description": "about dress 5","availableSizes": ["M","price": 75.0
},{
"_id": "dress6","image": "/images/dress6.jpeg","title": "Dress 6","description": "about dress 6","price": 75.0
}
]
}
App.js
import React,{ useEffect,useState } from "react";
import data from "./data.json";
import Products from "./components/Products";
import Filter from "./components/Filter";
import Cart from "./components/Cart";
import store from "./store";
import { Provider } from "react-redux";
const App = () => {
const [products,setProducts] = useState(data.products);
const [size,setSize] = useState("");
const [sort,setSort] = useState("");
const [cartItems,setCartItems] = useState([]);
useEffect(() => {},[products]);
// console.log(fetch('data/data.json').then(response => response.text())
// .then(data => console.log(data)))
const addtoCart = (product) => {
const items = cartItems.slice();
let alreadyInCart = false;
items.forEach((element) => {
if (element._id === product._id) {
element.count++;
alreadyInCart = true;
}
});
if (!alreadyInCart) {
items.push({ ...product,count: 1 });
}
setCartItems(items);
// localStorage.setItem("cartItems",JSON.stringify(items))
};
const removeFromCart = (item) => {
const items = cartItems.slice();
setCartItems(items.filter((elem) => elem._id !== item._id));
};
const sortProducts = (e) => {
const sort = e.target.value;
setSort(sort);
setProducts(
products
.slice()
.sort((a,b) =>
sort === "lowest"
? a.price < b.price
? 1
: -1
: sort === "highest"
? a.price > b.price
? 1
: -1
: a._id < b._id
? 1
: -1
)
);
};
const createOrder = (order) => {
alert('Click "OK" to confirm order!',order);
};
const filterProducts = (e) => {
if (e.target.value === "") {
setProducts(data.products);
setSize(e.target.value);
} else {
setSize(e.target.value);
setProducts(
data.products.filter(
(product) => product.availableSizes.indexOf(e.target.value) >= 0
)
);
}
};
return (
<>
<Provider store={store}>
<header>
<a href="/">React Cart</a>
</header>
<Filter
size={size}
filter={filterProducts}
sort={sortProducts}
count={data.products.length}
/>
<hr />
<main>
<Products add={addtoCart} />
<hr />
<div>
<Cart
createOrder={createOrder}
remove={removeFromCart}
cartItems={cartItems}
/>
</div>
</main>
<hr />
<footer>Footer</footer>
</Provider>
</>
);
};
export default App;
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）