我的代码抛出“不支持直接渲染<上下文>”和“上下文消费者使用多个子项呈现”错误

Question

我正在尝试制作一个聊天网站，我一直在关注这个YouTube tutoriel，我遇到了这两个错误：

不支持“Renderingdirectly”和“A context consumer was rendered with multiple children”

这是我的应用程序代码：

import React from 'react';
import ApolloProvider from './ApolloProvider';
import {Container} from 'react-bootstrap'
import Register from './pages/register'
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import './App.scss';
import Login from './pages/Login';
import Home from './pages/Home'
import {AuthProvider} from './context/auth';

function App() {

  return (
    <ApolloProvider >
      <AuthProvider>
        <Router>
          <Container className='pt-5'>
            <Routes>
            <Route exact path='/' element={<Home />}/>
              <Route  path='/register' element={<Register />}/>
              <Route  path='/login' element={<Login />}/>
            </Routes>
          </Container>
        </Router>
      </AuthProvider>
   </ApolloProvider>
  );
}

export default App;

这是我的上下文代码（ 我在我的 LOGIN 案例中设置令牌，这是从我的 login.js 访问的：

import React, {createContext, useReducer, useContext} from 'react'

const AuthStateContext = createContext()
const AuthDispatchContext = createContext()
const authReducer = (state, action) =>{
    switch(action.type){
        case 'LOGIN':
            localStorage.setItem("token", action.payload.token)
            return {
                ...state,
                user: action.payload,
            }
            case 'LOGOUT':
                return {
                    ...state,
                    user: null
                }
            default:
                throw new Error(`Unknown action type: ${action.type}`)
    }
}

export const AuthProvider = (props) => {
    const [state, dispatch] = useReducer(authReducer, {user: null})
    return (
       <AuthDispatchContext.Provider value={dispatch}>
            <AuthStateContext value={state}>
                {props.children}
            </AuthStateContext>
       </AuthDispatchContext.Provider>
    )
}

export const useAuthState = () => useContext(AuthStateContext)
export const useAuthDispatch = () => useContext(AuthDispatchContext)

这是我的登录代码的 sn-p，我们将令牌传递给上下文文件：

import { useAuthDispatch } from '../context/auth';

const LOGIN_USER = gql`
  query login(
    $username: String! 
    $password: String! 
  
    ) {
    login(
        username: $username 
        password: $password 
    
        ) {
      username email createdAt token
    }
  }
`;


export default function Login() {
    const [variables, setVariables]= useState({
        username: '',
        password: ''
    })
    const Navigate = useNavigate()
    const [errors,setErrors] = useState({})

    const dispatch = useAuthDispatch()

    const [loginUser, {loading}] = useLazyQuery(LOGIN_USER,{
        onError: (err)=>{
            setErrors(err.graphQLErrors[0].extensions.errors)
        },
        onCompleted: (data)=>{
                dispatch({type:'LOGIN', payload: data.login})
                Navigate('/')
        }

      })
   const submitLogin = (e) =>{
    e.preventDefault()
    loginUser({variables})
   }

Answer 1

您正在渲染 AuthStateContext 而它应该是 AuthStateContext.Provider，如下所示：

export const AuthProvider = (props) => {
  const [state, dispatch] = useReducer(authReducer, { user: null });
  return (
    <AuthDispatchContext.Provider value={dispatch}>
      <AuthStateContext.Provider value={state}>{props.children}</AuthStateContext.Provider>
    </AuthDispatchContext.Provider>
  );
};