我是redux的新手,我正在尝试为我的第一个项目实现redux。一切看起来都很好,但当我console.log从redux存储的数据时,它首先给了我两个空数组,然后在接下来的几行数组不是空的。这导致map函数不能在我的ProductCart元素上工作。
控制台:
BikesPage.js:22 []length: 0[[Prototype]]: Array(0)
BikesPage.js:22 []length: 0[[Prototype]]: Array(0)
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]0: {_id: '6351a9a95814ff5815e61187', title: 'MTB', price: '500', __v: 0}1: {_id: '6351aa75f685aa64faeaf27d', category: 'bike', title: 'MTB', price: '5080', __v: 0}2: {_id: '6351aa96f685aa64faeaf27f', category: 'bike5', title: 'MTB', price: '3980', __v: 0}length: 3[[Prototype]]: Array(0)
BikesPage.js:22 (3) [{…}, {…}, {…}]0: {_id: '6351a9a95814ff5815e61187', title: 'MTB', price: '500', __v: 0}1: {_id: '6351aa75f685aa64faeaf27d', category: 'bike', title: 'MTB', price: '5080', __v: 0}2: {_id: '6351aa96f685aa64faeaf27f', category: 'bike5', title: 'MTB', price: '3980', __v: 0}length: 3[[Prototype]]: Array(0)
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]
BikesPage.js:22 (3) [{…}, {…}, {…}]
还原剂:
const initialState = {
products: [],
};
export const productReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_ALL:
return { ...state, products: [...action.payload] };
case CREATE:
return [state.products, action.payload];
case UPDATE:
return state.products.map((product) =>
product._id === action.payload._id ? action.payload : product
);
case DELETE:
return state.products.filter((product) => product._id !== action.payload);
default:
return state;
}
};
合并异径管:
export const reducers = combineReducers({ products: productReducer });
处理措施:
export const getProducts = () => async (dispatch) => {
try {
const { data } = await api.fetchProducts();
dispatch({ type: FETCH_ALL, payload: data });
} catch (error) {
console.log(error.message);
}
};
自行车页面组件:
function BikesPage() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getProducts());
}, [dispatch]);
const product = useSelector((state) => state.products);
const { products } = product;
console.log(products);
return (
<Container>
<Row>
<Col>
<div className="BikesPage">
{(products.length > 0) &
products.map((p) => {
return <ProductCart price={p.price} title={p.title} />;
})}
</div>
</Col>
</Row>
</Container>
);
}
index.js文件:
const store = createStore(reducers, compose(applyMiddleware(thunk)));
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
为了解决这个问题,我甚至在app.js中编写了useEffect函数来调度getProducts(),但它仍然不起作用
1条答案
按热度按时间qnakjoqk1#
您需要写入两个
&&
,而不是&