使用 useEffect 更新 useReducer 'state'

Question

在我的应用程序中，我使用的是 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'
    }
  });

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 减速机结构示例：

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

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

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

useEffect 的响应应该是一个函数（该函数在组件卸载之前被调用）——在这里返回一个对象将是一个错误。