ContextApi 返回默认值

Question

我一直在研究 React 和开发应用程序，但我在使用上下文时遇到了问题。在一个组件中，我创建了上下文并提供了它的值，但是当我尝试在另一个组件中使用上下文的当前值时，我在console.log() 中有userName:undefined。代码：

import React, { useContext, useState } from 'react'
import EnterRoom from '../../Pages/EnterRoom'
import NameChoose from '../../Pages/NameChoose'
import Room from '../../Pages/Room'

export const AllInformation = React.createContext({userName:'default'}) as any

const InformationContextProvider:React.FC = () => {

    const [userInformation,setUserInformation] = useState({userName:'newValue'})

    return (
            <AllInformation.Provider value={{userInformation, setUserInformation}}>
                <Room/>
                <NameChoose/>
                <EnterRoom/>
            </AllInformation.Provider>  
    )
}

export default InformationContextProvider

export function useInformationContext(){
    const {userInformation} = useContext(AllInformation)
    return { userInformation }
}

我尝试在这里使用：

import React, { useState, FormEvent, useEffect, useContext} from 'react';
import './styles.css'
import { Link, useHistory } from 'react-router-dom';
import { useInformationContext } from '../../components/Context/index'
import io from 'socket.io-client';

function EnterRoom() {

    const [roomId, setRoomId] = useState('');
    const [name, setName] = useState('');
    const history = useHistory();
    const socket = io('http://localhost:3333');
    const { userInformation } = useInformationContext()
    
    useEffect(() => {
        if(sessionStorage.getItem('userName') || sessionStorage.getItem('roomId')) {
            history.push('/')
        }
        console.log({ userInformation })
    })
    
    return <h1>hello word</h1>
}

Answer 1

useInformationContext 正在破坏上下文值，这意味着它正在执行value.userInformation，但该键不存在。删除解构，因为值没有嵌套：

export function useInformationContext() {
    // no destructuring needed here
    const userInformation = useContext(AllInformation)
    return { userInformation }
}

Answer 2

直接返回useContext钩子而不破坏。

export function useInformationContext() {
    return useContext(AllInformation)
}