React hook 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结果

Answer 1

不默认为错误

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

default:
throw new Error();
}

至

default:
return state;
}