渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

我在React中有一个要在index.js中导入的组件，但是它给出了这个错误：

渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

index.js：

import React from 'react';
import ReactDOM from 'react-dom'; 
import  Search_Bar from './components/search_bar';

const   API_KEY = 'AIzaSyCnpDObOLiiqN87YKJKZ-cxzdAsvYD1F-U';

const App = () => {
    return
    (
        <div>
            <Search_Bar />
         </div>
    );
}

ReactDOM.render(<App />, document.querySelector('#root'));

零件：

import React from 'react';

const Search_Bar = () =>
{
    return <input />;
};

export default Search_Bar;

我在render（）方法中遇到了同样的问题。当您从render（）返回时，问题来了：

render() {
    return 
    (
        <div>Here comes JSX !</div>
    );
}

即如果您在新行中开始括号

尝试使用：

render() {
    return (
        <div>Here comes JSX !</div>
    );
}

这样可以解决错误

假定您将无状态组件用作箭头函数，则内容需要放入括号“（）”而不是括号“ {}”，并且必须删除返回函数。

const Search_Bar= () => (
    <input />; 
);

问题出在返回中，请尝试以下操作：

return(
);

这解决了我的问题

出现此错误的原因有很多：

1. 如上所述，在新行上开始括号。

错误：

render() {
  return  
  (
    <div>I am demo data</div>
  )
}

正确的实施方式render：

render() {
  return (
    <div>I am demo html</div>
  );
}

在上面的示例中，return语句末尾的分号不会有任何区别。

2. 也可能是由于布线中使用了错误的括号引起的：

错误：

export default () => {
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
}

正确方法：

export default () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
)

在错误示例中，我们使用了花括号，但必须使用圆括号。这也给出了相同的错误。

我遇到了这个线程，以寻找该错误的答案。

对我来说，奇怪的是，一切都在dev中运行（npm start）时可以正常工作，但是在构建应用（npm run build）然后使用时会发生错误serve -s build。

事实证明，如果您在render块中有注释，如下所示，将导致错误：

ReactDOM.render(
  <React.StrictMode>
    // this will cause an error!
    <Provider store={store}>
      <AppRouter />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

我分享是为了防止其他人遇到同样的问题。

得到了答案：后面不应该使用括号 return ()。这有效：

return  <div> <Search_Bar /> </div>

如果要写多行，那么 return ( ...

您的起始括号应与放在同一行return。

花括号中包含一个组件，即{and }：

const SomeComponent = () => {<div> Some Component Page </div>}

用圆括号ie替换它们，(并)解决了这个问题：

const SomeComponent = () => (<div> Some Component Page </div>)

就我而言，这是我从调用程序类中导入自定义组件的方式引起的，也就是我所做的错误

import {MyComponent} from './components/MyComponent'

代替

import MyComponent from './components/MyComponent'

使用后者解决了这个问题。

问题似乎是返回时的括号。括号应与以下return语句一致：

return(
)

但不是这样：

return
(
)  

运行Jest测试时遇到了此错误。安装文件中正在模拟其中一个组件，因此当我尝试在测试中使用实际的组件时，我得到了非常意外的结果。

jest.mock("components/MyComponent", () => ({ children }) => children);

删除该模拟程序（实际上并不需要）后，立即解决了我的问题。

当您知道从组件中正确返回时，这可能会节省您几个小时的研究时间。

我收到了此错误消息，但这是一个非常基本的错误，我已经将另一个组件复制/粘贴为模板，从render（）中删除了所有内容，然后将其导入并添加到父级JSX中，但尚未重命名组件类。因此，错误看起来像是来自另一个组件，我花了一段时间尝试对其进行调试，然后才能发现它实际上并不是该组件引发错误！将文件名作为错误消息的一部分会有所帮助。希望这对某人有帮助。

哦，旁注说明我不确定有人提到返回undefined会引发错误：

render() {
  return this.foo // Where foo is undefined.
}

我也有同样的问题nothing was returned from render。

事实证明，我的代码带有花括号{}。我这样写代码：

import React from 'react';

const Header = () => {
    <nav class="navbar"></nav>
}

export default Header;

它必须在以下范围内()：

import React from 'react';

const Header = () => (
    <nav class="navbar"></nav>
);

export default Header;

相同的错误，不同的情况。我将其发布在这里是因为有人可能和我一样。

我正在使用如下上下文API。

export const withDB = Component => props => {
    <DBContext.Consumer>
        {db => <Component {...props} db={db} />}
    </DBContext.Consumer>
}

因此，基本上，错误消息为您提供了答案。

渲染未返回任何内容。这通常意味着缺少return语句

withDB应该返回一个html块。但这并没有返回任何东西。将我的代码修改为以下内容可以解决我的问题。

export const withDB = Component => props => {
  return (
    <DBContext.Consumer>
        {db => <Component {...props} db={db} />}
    </DBContext.Consumer>
  )
}

出现此问题的另一种方式是在您输入条件并将其插入其中时。如果不满足条件，则没有任何退货。因此，错误。

export default function Component({ yourCondition }) {

    if(yourCondition === "something") {
        return(
            This will throw this error if this condition is false.
        );
    }
}

我所做的只是插入带有null的外部返回，并且再次正常工作。

尽管我的情况略有不同，但我遇到了这个问题。在此处发布信息可能会在某个时候对某人有所帮助。

我有

const Layout = ({ children }) => {
    <div className="mx-4 my-3">
        <Header />
        <Menu />
        {children}
        <Footer />
    </div>
};

但这必须是：

const Layout = ({ children }) => (
    <div className="mx-4 my-3">
      <Header />
      <Menu />
      {children}
      <Footer />
    </div>
);

我猜这是制表符和空格的区别。我不确定为什么会在乎...

我只在生产版本上有相同的错误。开发中没事，没有警告。

问题是评论行

错误

return ( // comment
  <div>foo</div>
)

好

// comment
return (
  <div>foo</div>
)

在下一行写括号以在下一行不返回。

不正确的

return
(
statement1
statement2
.......
.......
)

正确

return(
statement1
statement2
.........
.........
)

那可能是因为您将使用功能组件，而您将使用这些'{}'括号而不是'（）'示例：const Main =（）=>（...然后是您的代码...）。基本上，您必须将代码包装在这些括号“（）”中。

我遇到了同样的错误，无法解决。我先导出一个功能组件，然后再将其导入到我的App组件中。我将我的功能组件设置为箭头功能格式，但出现错误。我在花括号中放了一个“ return”语句，“ return（）”并将所有我的JSX放到了括号中。希望这对某人有用，而不是多余。看来stackoverflow会将其自动格式化为一行，但是，在我的编辑器VSCode中，它超过了多行。也许没什么大不了的，但想简明扼要。

import React from 'react';

const Layout = (props) => {
    return (
        <>
            <div>toolbar, sidedrawer, backdrop</div>
            <main>
                {props.children}
            </main>
        </>
    );
};

export default Layout;