时间戳

首页 > 解决方案 > 使用 useEffect 更新 useReducer 的“状态”

javascript - 使用 useEffect 更新 useReducer 的“状态”

问题描述

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

标签： javascriptreactjsreact-hooksreact-contextuse-reducer

解决方案

您必须调度一个操作来更新您的state变量。

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

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

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

减速器结构示例：

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

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

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

来自 useEffect 的响应应该是一个函数（在卸载组件之前调用该函数） - 在此处返回一个对象将是一个错误。

推荐阅读