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

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

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的响应应该是一个函数（该函数在React卸载该钩子之前就已调用）-在此处返回对象将是一个错误。

使用useEffect更新useReducer的“状态”

1 个答案: