在reducer中使用对象的值
在reducer中使用对象的值
提问于 2020-11-06 05:04:54
我在reducer中存储了一个对象：
editProductBasket: [{
name: "roger",
price: "12",
}],我尝试在我的代码中使用不同部分的值，代码如下：
function PhoneMockupEdit() {
const [
{
editProductBasket: { name, price, description, quantity },
},
dispatch,
] = useStateValue();return (
<div className="phone__mockup">
<h1>{name}<h2>
</div>
);
}但是，没有显示来自reducer的数据。你知道为什么吗？
下面是我的StateProvider代码：
import React, { createContext, useContext, useReducer } from "react";
// create the data layer
export const StateContext = createContext();
// Build a provider so we can wrap entire app inside of provider so we access data layer
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
// This is where we use it in a component
export const useStateValue = () => useContext(StateContext);下面是我的reducer代码：
export const initialState = {
editProductBasket: [],
};
function reducer(state, action) {
console.log(action);
switch (action.type) {
case "SET_EDIT_PRODUCT":
return {
...state,
editProductBasket: [...state.editProductBasket, action.item],
};
default:
return state;
}
}
export default reducer;回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-06 05:23:22
你错误地解构了你的状态。
editProductBasket属性是一个数组，而不是一个对象，因此您需要分解数组的第一个元素，而不是尝试从整个数组中分解属性。
const [
{
editProductBasket: [{ name, price, description, quantity }],
},
dispatch,
] = useStateValue();
const { createContext, useContext, useReducer } = React;
// create the data layer
const StateContext = createContext();
// Build a provider so we can wrap entire app inside of provider so we access data layer
const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
// This is where we use it in a component
const useStateValue = () => useContext(StateContext);
const initialState = {
editProductBasket: [
{
name: 'roger',
price: '12',
},
],
};
function reducer(state, action) {
console.log(action);
switch (action.type) {
case 'SET_EDIT_PRODUCT':
return {
...state,
editProductBasket: [...state.editProductBasket, action.item],
};
default:
return state;
}
}
function PhoneMockupEdit() {
const [
{
editProductBasket: [{ name, price, description, quantity }],
},
dispatch,
] = useStateValue();
return (
<div className="phone__mockup">
<h1>{name}</h1>
</div>
);
}
ReactDOM.render(
<StateProvider reducer={reducer} initialState={initialState}>
<PhoneMockupEdit />
</StateProvider>,
document.getElementById('root')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"/>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64705264
复制相关文章
相似问题
腾讯云开发者
