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

时间：2017-10-14 05:32:53

标签： reactjs ecmascript-6 react-redux

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

21 个答案:

答案 0 :(得分：73)

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

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

<强>即。如果您在新行中开始括号

尝试使用：

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

这将解决错误

答案 1 :(得分：15)

鉴于您使用无状态组件作为箭头函数，内容需要括号“（）”而不是括号“{}”，您必须删除返回函数。

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

答案 2 :(得分：10)

问题在于回归，试试这个：

return(
);

这解决了我的问题

答案 3 :(得分：6)

我遇到了这个线程，以寻找对this error的答案。

对我来说，奇怪的是，一切都在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")
);

我分享的是其他人遇到相同问题的情况。

答案 4 :(得分：4)

花括号中包含一个组件，即unsaveFunction()和{：

}

用圆括号代替它们，即const SomeComponent = () => {<div> Some Component Page </div>} 和(解决了该问题：

)

答案 5 :(得分：4)

得到答案：我不应该在return <div> <Search_Bar /> </div> 之后使用括号。这有效：

return ( ...

如果你想写多线，那么return

您的起始括号应与return brand(j+1) 位于同一行。

答案 6 :(得分：3)

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

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

而不是

import MyComponent from './components/MyComponent'

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

答案 7 :(得分：1)

可以看到此错误的原因有很多：

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

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

答案 8 :(得分：0)

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

return(
)

但不是这样：

return
(
)

答案 9 :(得分：0)

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

答案 10 :(得分：0)

我遇到了同样的错误，无法解决。我先导出一个功能组件，然后再将其导入到我的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;

答案 11 :(得分：0)

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

答案 12 :(得分：0)

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

问题是评论行

错误 

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

确定 

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

答案 13 :(得分：0)

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

我有

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

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

答案 14 :(得分：0)

此问题可以在屏幕上弹出的另一种方式是，您提供条件并将其插入到其中。如果不满足条件，则没有任何退货。因此是错误。

export default function Component({ yourCondition }) {

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

我所做的就是插入带有null的外部返回，然后再次正常工作。

答案 15 :(得分：0)

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

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

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

当您知道从组件中正确返回时，也许这将为您节省几个小时的研究。

答案 16 :(得分：0)

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

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

答案 17 :(得分：0)

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

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

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

答案 18 :(得分：0)

在括号旁边写上括号，而不在下一行返回。

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

正确

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

答案 19 :(得分：-1)

在我的功能组件中出现与

相同的错误 
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>

   )            
    })

}

答案 20 :(得分：-1)

在使用 Jest、Typescript、@testing-library/react 时出现了奇怪的行为。

当我从 resetMocks: true 中删除 jest.config.js 时，使用了我的 __mocks__/ 模拟实现。

相关问题
最新问题