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

JavaScript React.js

Tony凯

2020-03-19

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

第2239篇《渲染未返回任何内容。这通常意味着缺少return语句。或者,不渲染任何内容,则返回null》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
小哥神奇 2020.03.19

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

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

删除该模拟程序(实际上并不需要)可以立即解决我的问题。

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

ProJinJin 2020.03.19

相同的错误,不同的情况。我将其发布在这里是因为有人可能与我的处境相同。

我正在使用如下上下文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>
  )
}
西门Sam 2020.03.19

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

不正确的 return ( statement1 statement2 ....... ....... )

正确

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

逆天西门 2020.03.19

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

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

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

Near神奇 2020.03.19

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

return(
)

但不是这样:

return
(
)  
樱Near 2020.03.19

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

const Search_Bar= () => (
    <input />; 
);
飞云Pro猴子 2020.03.19

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

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

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

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

神奇A 2020.03.19

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

  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>
)

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

小胖古一 2020.03.19

问题出在返回中,请尝试以下操作:

return(
);

这解决了我的问题

乐逆天 2020.03.19

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

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

用圆括号ie替换它们,()修复问题:

const SomeComponent = () => (<div> Some Component Page </div>)
猿神乐 2020.03.19

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

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

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

尝试使用:

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

这样可以解决错误

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android