Правильный способ настройки useContext и useState с React. js?

Question

У меня есть contexts/RoomContext.tsx:

import { useState, createContext } from 'react';

const RoomContext = createContext([{}, () => {}]);

const RoomProvider = (props) => {
    const [roomState, setRoomState] = useState({ meetingSession: null, meetingResponse: {}, attendeeResponse: {} })

    return <RoomContext.Provider value={[roomState, setRoomState]}>
        {props.children}
    </RoomContext.Provider>
}
export { RoomContext, RoomProvider }

Тогда в моем компоненте RoomPage.tsx у меня есть:

const RoomPageComponent = (props) => {
    const router = useRouter()
    const [roomState, setRoomState] = useContext(RoomContext);

    useEffect(() => {
        const createRoom = async () => {
            const roomRes = await axios.post('http://localhost:3001/live')
            console.log('roomRes', roomRes)
            setRoomState(state => ({ ...state, ...roomRes.data }))
        }

        if (router.query?.id) {
            createRoom()
        }

    }, [router])

    return <RoomPageWeb {...props} />
}

export default function RoomPage(props) {

    return (
        <RoomProvider>
            <RoomPageComponent {...props} />
        </RoomProvider>
    )
}

Но я получаю жалобу на setRoomState:

This expression is not callable.
  Type '{}' has no call signatures.

Answer 1

Проблема здесь в том, что вы пытаетесь использовать RoomContext в компоненте (RoomPage), который не имеет RoomContext.Provider, выше в иерархии, поскольку он отображается внутри компонента.

Решение здесь, чтобы обернуть RoomPage с RoomProvider

import { RoomProvider, RoomContext } from '../../contexts/RoomContext'
function RoomPage(props) {
    const [roomState, setRoomState] = useContext(RoomContext);

    useEffect(() => {
        const createRoom = async () => {
            const roomRes = await axios.post('http://localhost:3001/live')
            console.log('roomRes', roomRes)
            setRoomState(state => ({...state, ...roomRes.data}))

        }
    ...

    return (

            <RoomPageWeb {...props} />
    )

export default (props) => (
    <RoomProvider><RoomPage {...props} /></RoomProvider>
)