context

为什么这里会卡住了，怎么调都调不通

// 多个context的试验
import React from 'react'

const ThemeContext=React.createContext('light')
const UserContext=React.createContext({
    name:"Guest"
})

class App extends React.Component{
    constructor(props){
        super(props)
        this.state={
            theme:ThemeContext
        }
    }
    render(){
        return (
            <ThemeContext.Provider value={this.state.theme}>
                <UserContext.Provider value={UserContext}>
                        <Show/>
                </UserContext.Provider>
            </ThemeContext.Provider>
        )
    }
}


export default App

function Show(){
    return (
        <ThemeContext.Consumer>
            {theme => 
                <div>
                    {theme}
                </div>}
             {/* <UserContext.Consumer>
                 {user => (
                     {theme}
                <div>123{theme}</div>
                )}
                 </UserContext.Consumer>
                 */}
        </ThemeContext.Consumer>
    )
}