React 身份验证未正确更新

Question

当我在 UserAuthContext.js 中使用我的功能时，我的应用程序无法正常工作。我尝试登录，但用户没有直接访问 /browse。但是，如果我在 app.js 中输入相同的代码，我就可以创建并使用一个帐户登录。我不知道是什么原因 这是代码 https://codesandbox.io/s/cool-euler-eicfr?file=/src/App.js - 无效版本（以上代码属于此）：https://not-working.netlify.app/ - 我在 app.js 中有代码的工作版本 https://netflix-clone-kasamtde.netlify.app/

Answer 1

您不能在不是 UserAuthContextProvider 的子组件中使用 useAuthContext。它总是 return undefined

最简单的解决方法是将 UserAuthContextProvider 移动到 index.js:

// index.js
import React from 'react';
import {render} from 'react-dom';
import './index.css';
import App from './App';
import UserAuthContextProvider from "./components/Contexts/UserAuthContext.js";


render(
  <React.StrictMode>
    <UserAuthContextProvider><App /></UserAuthContextProvider>
  </React.StrictMode>,
  document.getElementById('root')
);