React hook useContext 重新渲染组件

Question

我正在使用带有 useContext 的全局挂钩来存储已注册的用户信息。我不知道为什么 useContext 两次渲染我的组件，而第二次状态未定义。 Provider 是全局的，在 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

不要默认错误

总是在你的 reducer 中返回状态，而不是未定义的。这是我看到的第一个问题。

default:
  throw new Error();
}

到

default:
  return state;
}