反应错误：TypeError：render不是函数

我收到一个错误消息，提示“ TypeError：render不是一个函数”

详细信息如下：

updateContextConsumer

... /反应/contextapi/node_modules/react-dom/cjs/react-dom.development.js:18747

  18744 | {
  18745 |   ReactCurrentOwner$1.current = workInProgress;
  18746 |   setIsRendering(true);
> 18747 |   newChildren = render(newValue);
        | ^  18748 |   setIsRendering(false);
  18749 | } // React DevTools reads this flag.
  18750 | 

查看已编译

开始工作

... /反应/contextapi/node_modules/react-dom/cjs/react-dom.development.js:19114

  19111 |   return updateContextProvider(current, workInProgress, renderLanes);
  19112 | 
  19113 | case ContextConsumer:
> 19114 |   return updateContextConsumer(current, workInProgress, renderLanes);
        | ^  19115 | 
  19116 | case MemoComponent:
  19117 |   {

查看已编译

我在Navbar.js中有以下代码：

import React, { Component } from 'react'
import { ThemeContext } from '../contexts/ThemeContext';
 
class Navbar extends Component {
    render() {
        return (
            <ThemeContext.Consumer> { context => 
            {
                const { isDarkTheme, darkTheme, lightTheme } = context;
                const theme = isDarkTheme ? darkTheme : lightTheme;
 
                return (
                    <nav style={‌{ background: theme.background, color: theme.text, height: '120px' }}>
                        <h2 style={‌{ textAlign: 'center' }}>
                            Oak Academy
                        </h2>
                        <div className="ui three buttons">
                            <button className="ui button">Overview</button>
                            <button className="ui button">Contact</button>
                            <button className="ui button">Support</button>
 
                        </div>
                    </nav>
                )
            }}
            </ThemeContext.Consumer>
        );
    }
}
 
export default Navbar;

在ThemeContext.js上，我有以下代码：

import React, { Component, createContext } from 'react'
 
export const ThemeContext = createContext();
 
class ThemeContextProvider extends Component {
    state = {
        isDarkTheme: true,
        lightTheme: {
            text: '#222',
            background: '#d8ddf1'
        },
        darkTheme: {
            text: '#fff',
            background: '#5c5c5c'
        }
    }
 
    //... <-gets all properties
    render() {
        return (
            <ThemeContext.Provider value={‌{ ...this.state }}>
                {this.props.children}
            </ThemeContext.Provider>
        );
    }
}
 
export default ThemeContextProvider;

我曾尝试使用谷歌搜索此错误消息，但我只能发现一些错字，但我尝试查看是否可以使用，但没有帮助。我该如何解决这个问题？