reactjs - 文件中的两个 useContext

Question

我想在同一个文件中使用两个 useContexts'。

import React, { useContext, useState } from 'react'
import { SubscribeContext } from '../NavBar'
import { AppContext } from '../../../Home'
import './Subscribe.css'

export default function SubscribePopup() {
    const { setSubscribePop } = useContext(SubscribeContext);
    const { error, setError } = useContext(AppContext);
    const [text, setText] = useState("");
    return (
        <div>
        </div>
    )
}

SubscribeContext 似乎工作正常。 但是 useContext(AppContext) 返回未定义

#AppContext File
import React, { createContext, useState } from 'react'
import Card from './components//Cards/Card'
import NavBar from './components/NavBar/NavBar'


export const AppContext = createContext();
export default function Home() {
    const [error, setError] = useState(false);
    return (
        <div>
            <AppContext.Provider value={{error, setError}}>

            </AppContext.Provider>
        </div>
    )
}

这里出了什么问题？

Answer 1

尝试为React Context创建初始状态，因为如果没有初始状态， react 上下文将返回未定义。

初始上下文

export const AppContext = createContext({ error: false })

组件

import React, { createContext, useState } from 'react'
import Card from './components//Cards/Card'
import NavBar from './components/NavBar/NavBar'

const state = {
  error: false
}

export const AppContext = createContext(state);
export default function Home() {
    const [error, setError] = useState(false);
    return (
        <div>
            <AppContext.Provider value={{error, setError}}>

            </AppContext.Provider>
        </div>
    )
}
export const AppContext = createContext({ error: false })