ContextApi возвращает значение по умолчанию

#javascript #html #reactjs #typescript

#javascript #HTML #reactjs #typescript

Вопрос:

Я изучал react и разрабатывал приложение, но у меня возникла проблема с использованием контекста. В одном компоненте я создаю контекст и предоставляю его значение, но когда я пытаюсь использовать текущее значение context в другом компоненте, у меня есть userName:undefined console.log() . Код:

 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>
}

Ответ №1:

useInformationContext уничтожает значение контекста, что означает, что оно выполняется value.userInformation , но этот ключ не существует. Удалите деструкцию, поскольку значение не является вложенным:

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

1. Я сделал это, но теперь он возвращает значение по умолчанию, а не значение, предоставленное useState .

2. Код никогда не обновляет значение в контексте. Когда вы ожидаете его обновления?

3. @uKn_70 ты уверен? Для меня это выглядит нормально: codesandbox.io/s/dazzling-newton-ud15u?file=/src/App.tsx

Ответ №2:

возвращает непосредственно перехват useContext без разрушения.

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