渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null [关闭]

Question

我在 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;

Answer 1

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

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

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

尝试使用：

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

这将解决错误

Answer 2

鉴于您将无状态组件用作箭头函数，因此内容需要放在括号“()”而不是括号“{}”中，并且您必须删除返回函数。

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

Answer 3

问题出在退货，试试这个：

return(
);

这解决了我的问题

Answer 4

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

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

错误：

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

实现render的正确方法：

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

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

1. 也可能是由于路由中使用了错误的括号：

错误：

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

正确方法：

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

在错误示例中，我们使用了大括号，但我们必须使用圆括号。这也会产生同样的错误。

Answer 5

我在运行 Jest 测试时遇到了这个错误。其中一个组件在安装文件中被模拟，所以当我尝试在测试中使用实际组件时，我得到了非常意想不到的结果。

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

删除这个模拟（实际上并不需要）立即解决了我的问题。

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

Answer 6

我们有一个用大括号括起来的组件，即{ 和}：

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

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

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

Answer 7

我在寻找this error 的答案时遇到了这个帖子。

对我来说，奇怪的是，在 dev (npm start) 中运行时一切正常，但在构建应用程序 (npm run build) 然后使用 serve -s build 运行时会发生错误。

事实证明，如果你在渲染块中有cmets，如下所示，就会导致错误：

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

我正在分享，以防其他人遇到同样的问题。

Answer 8

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

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

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

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

Answer 9

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;

Answer 10

问题似乎是返回时的括号。 括号应该符合这样的返回语句：

return(
)

但不是这样：

return
(
)  

Answer 11

在我的情况下，同样的错误是由我从调用者类导入自定义组件的方式引起的，即我正在做

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

而不是

import MyComponent from './components/MyComponent'

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

Answer 12

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

哦，附​​注我不确定是否有人提到返回 undefined 会引发错误：

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

Answer 13

在屏幕上弹出此问题的另一种方式是，当您提供条件并在其中插入返回时。如果条件不满足，则没有任何回报。因此出现错误。

export default function Component({ yourCondition }) {

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

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

Answer 14

我只在生产版本上遇到同样的错误。 开发中一切正常，没有警告。

问题出在注释行

错误

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

好的

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

Answer 15

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

不正确

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

正确

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

Answer 16

这可能是因为您将使用函数式组件，并且您将使用这些“{}”大括号而不是“()” 示例： const Main = () => ( ... 然后是您的代码 ... )。 基本上，您必须将代码包含在这些括号“()”中。

Answer 17

在我的功能组件中出现与

相同的错误

function ShopCard(props) {
const { shops = {} } = useContext(ContextProvider);
return(
    shops.map((shop)=>{
    <div></div>     
})
)
}

代替

function ShopCard(props) {
  const { shops = {} } = useContext(ContextProvider);
  shops.map((shop)=>{
    return(
   <div></div>

   )            
    })

}

Answer 18

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

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

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

所以基本上错误信息就是给你答案。

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

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

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

Answer 19

我遇到了同样的错误，但无法弄清楚。我导出了一个功能组件，然后导入到我的 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;