React hook useContext 重新渲染組件

Question

我正在使用帶有 useContext 的全局鈎子來存儲注冊的用戶信息。 我不知道為什么 useContext 兩次渲染我的組件並且第二次未定義狀態。 Provider 是全局的，在 index.js 中

有什么想法可以防止兩次渲染組件嗎？

商店.js：

import React, { createContext, useReducer } from 'react';

const initialState = {
  accessToken: '',
  expirationDate: '',
  fullName: ''
};
const store = createContext(initialState);
const { Provider } = store;

const StateProvider = ({ children }) => {
const [state, dispatch] = useReducer((state, action) => {
  const { type, payload } = action;

  switch (type) {
    case 'login':
      const newState = {
        ...state,
        ...payload
      };
      return newState;
    default:
      throw new Error();
    }
  }, initialState);

  return <Provider value={{ state, dispatch }}>{children}</Provider>;
};

export { store, StateProvider };

當我使用 useContext(store) 我得到這個結果：

使用上下文結果

Answer 1

不要默認錯誤

始終在您的減速器中返回狀態，而不是未定義。 這是我看到的第一個問題。

default:
  throw new Error();
}

到

default:
  return state;
}