使用 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 將是一個錯誤。