反应错误：TypeError：渲染不是函数答案

【问题标题】：React error: TypeError: render is not a function反应错误：TypeError：渲染不是函数
【发布时间】：2021-04-28 01:22:09
【问题描述】：

我收到一条错误提示“TypeError：render is not a function”

详情如下：

updateContextConsumer

.../React/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 |

查看编译

开始工作

.../React/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;

我试过用谷歌搜索这个错误信息，但我只能找到一个错字，但我试着看看有没有办法，但没有帮助。我该如何解决这个问题？

【问题讨论】：

只是一个快速更新，不过我确实注意到这段代码有些奇怪。我正在看一个关于这个的教程，只是注意到我在Navbar.js 有两个return()。不确定这是否可以接受。
您的退货看起来不错，它们属于两个不同的组成部分。您可以在 jsfiddle 或类似内容上创建一个可重现的示例吗？

标签： reactjs

【解决方案1】：

问题很可能是这一行中的空格：

  <ThemeContext.Consumer> { context =>

{ 之前的空格被解析为 React 子代，因此传递给 ThemeContext.Consumer 的子代是一个包含字符串 ' ' 和您的函数的数组。您可以删除空格或将{ context => 放在换行符上，这样所有空格都会被删除。

【讨论】：

哇，我根本不知道有空格会影响反应。