如何修复NextCreate不是设置USEMEMO设置身份验证React路由器和挂钩的函数

Question

我正在尝试使用上下文为我的应用创建身份验证提供商。遵循用反应路由器和React钩子进行身份验证的指南。如果验证更改，则使用备忘录来获取身份验证。

这是我关注的指南https://medium.com/trabe/implementing-private-routes-with-react-router-and-hook-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);

私有组件

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

auth -provider包装我的应用

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

我希望身份证提供者能够获取用户并logged_in状态，并将其提供给子女组件。从上下文API查看Authdata的私有路线，仅在用户登录时才渲染路由。预先感谢！

usememo正在抛出此错误Next Create不是功能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

当您不将函数传递为useMemo()参数时，"nextCreate is not a function"错误会抛出。例如，useMemo(123, [])将投掷，useMemo(() => 123, [])不会。

Answer 2

您不需要使用useMemo。它将复制提供者已经完成的工作。而是

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