使用 useEffect 更新 useReducer 'state'

Question

在我的应用程序中，我使用的是 React Hooks/Context API。现在我需要在我的 Provider 组件挂载时将从 localStorage 获取的数据分配给 initialState.carts / state.carts。 如果 useEffect 支持返回对象，那将是可能的。 但是在useEffect中是不可能返回object的！

现在我该如何解决这个问题？

代码如下，

 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' } });

Answer 1

您必须发送一个操作来更新您的state变量。

if (localStorage.getItem("carts") !== null) {
      const fetchedCarts = JSON.parse(localStorage.getItem("carts"));
      dispatch({ type: 'UPDATE', payload: fetchedCarts })
}

因此，您必须将此操作类型添加到您已在此处使用的减速器开关中：

const [state, dispatch] = useReducer(reducer, initialState);

en reducer结构示例：

const reducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE':
      return { ...state, ...action.payload }
      break
    default:
      return state
  }
}

我相信useEffect()应该有一个 dependencies 数组（因为state的更新将以当前形式重新触发它）。

如果 useEffect 支持返回对象，那将是可能的。 但是在useEffect中是不可能返回object的！

来自 useEffect 的响应应该是 function（在卸载组件之前调用 function）- 在这里返回 object 将是一个错误。