如何修复nextCreate不是设置useMemo的功能设置备忘录设置身份验证React Router和Hook

Question

我正在尝试使用上下文为我的应用创建身份验证提供程序。遵循有关使用React Router和React Hook进行身份验证的指南。如果身份验证发生更改，它将使用备忘录来获取身份验证。

这是我遵循的指南 https://medium.com/trabe/implementing-private-routes-with-react-router-and-hooks-ed38d0cf93d5

我尝试查找错误并解决备忘录，但无济于事。

这是我的提供者

const AuthDataContext = createContext(null)

const initialAuthData = {}

const AuthDataProvider = props => {
  const [authData, setAuthData] = useState(initialAuthData)

  useEffect(() => {
    async function getAuth(){
      let currentAuthData = await fetch("URL/api/v1/logged_in", {
        method: "GET",
        credentials: "include",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        }
      })
        .then(res => res.json())
        .then(data => (data))
        .catch(error => console.error("Error:", error));

        if(currentAuthData) {
          setAuthData(currentAuthData)
        }
    };
    getAuth()
  },[])

  const onLogout = () => setAuthData(initialAuthData);

  const onLogin = newAuthData => setAuthData(newAuthData);

  const authDataValue = useMemo({ ...authData, onLogin, onLogout }, [authData]);
  return <AuthDataContext.Provider value={authDataValue} {...props} />;
};

export const useAuthDataContext = () => useContext(AuthDataContext);

PrivateRoute组件

const PrivateRoute = ({ component, ...options }) => {
  const { user } = useAuthDataContext();
  const finalComponent = user ? component : SignInPage;

  return <Route {...options} component={finalComponent} />;
};

包裹我的应用程序的AuthProvider

const MyApp = props => (
    <BrowserRouter>
      <AuthDataProvider>
        <App />
      </AuthDataProvider>
    </BrowserRouter>
);

我希望身份验证提供程序可以获取用户和Logged_In状态，并将其提供给子组件。用于从上下文api查看authData的专用路由，并且仅在用户登录后才呈现该路由。在此先感谢您！

useMemo抛出此错误nextCreate不是函数mountMemo

 13962 |   var hook = mountWorkInProgressHook();
 13963 |   var nextDeps = deps === undefined ? null : deps;
> 13964 |   var nextValue = nextCreate();
       | ^  13965 |   hook.memoizedState = [nextValue, nextDeps];
 13966 |   return nextValue;
 13967 | }

查看已编译

Answer 1

如果"nextCreate is not a function"不将函数作为useMemo()参数传递，则会引发错误。例如，useMemo(123, [])将抛出而useMemo(() => 123, [])不会。

Answer 2

你不需要使用useMemo. 它将重复 Provider 已经完成的工作。反而

return <AuthDataContext.Provider value={{ authData, onLogin, onLogout }} {...props} />;