在我的应用程序中,我使用 React Hooks/Context API。现在,每当我的 Provider 组件安装时,我都需要将从 localStorage 获取的数据分配给initialState.carts / state.carts。如果 useEffect 支持返回对象,这是可能的。但是在useEffect中不可能返回对象!
现在我该如何解决这个问题呢?
代码如下,
const initialState = {
books: books,
carts: []
};
export const Context = createContext(initialState);
export const Provider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
if (localStorage.getItem("carts") !== null) {
const fetchedCarts = JSON.parse(localStorage.getItem("carts"));
//Here I want to assign 'fetchedCarts' array items in 'state.carts' or 'initialState.carts'
}
});
您必须发送一个操作来更新您的state
多变的。
if (localStorage.getItem("carts") !== null) {
const fetchedCarts = JSON.parse(localStorage.getItem("carts"));
dispatch({ type: 'UPDATE', payload: fetchedCarts })
}
所以你必须将此操作类型添加到你的reducer您已在此处使用的开关:
const [state, dispatch] = useReducer(reducer, initialState);
En 减速机结构示例:
const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE':
return { ...state, ...action.payload }
break
default:
return state
}
}
我相信useEffect()
应该有一个依赖项数组(因为更新state
将以当前形式重新触发它)。
如果 useEffect 支持返回对象,这是可能的。但是在useEffect中不可能返回对象!
useEffect 的响应应该是一个函数(该函数在组件卸载之前被调用)——在这里返回一个对象将是一个错误。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)