React钩子useContext重新渲染组件

Question

我正在使用带有useContext的全局挂钩来存储注册的用户信息。我不知道为什么useContext两次渲染我的组件，并且第二次未定义状态。 提供程序是全局的，在index.js中

有什么想法可以防止渲染两次组件吗？

store.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）时，我得到以下结果：

useContext result

Answer 1

不默认为错误

始终在减速器中返回状态，不是未定义的。这是我看到的第一个问题。

default:
  throw new Error();
}

到

default:
  return state;
}