渲染未返回任何内容。这通常意味着缺少返回语句。或者,为了不呈现任何内容,返回null[关闭]

我也有同样的问题 render() 方法 问题是当你从 render() 作为:

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

i、 e.如果你在新行中开始括号

尝试使用:

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

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

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

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

我们在花括号中包含了一个组件,即。 { 和 } :

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

将其替换为圆形支架,即。 ( 和 ) 修正了这个问题:

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

我偶然发现这条线索是为了寻找答案 this error

serve -s build .

事实证明,如果渲染块中有注释,如下图所示,则会导致错误:

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

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

我也有同样的问题 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;

得到答案:我不应该在后面使用括号 return () . 这项工作:

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

如果你想写多行,那么 return ( ...

起始括号应与 return .

问题似乎是返回时的括号。 括号应与返回语句保持一致,如下所示:

return(
)

但不是这样:

return
(
)  

在我的例子中,同样的错误是由我从调用者类导入自定义组件的方式引起的,即我正在执行的操作

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

import MyComponent from './components/MyComponent'

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

我收到了这个错误消息,但这确实是一个基本错误,我复制/粘贴了另一个组件作为模板,从render()中删除了所有内容,然后将其导入并添加到父JSX中,但尚未重命名组件类。因此,这个错误看起来像是来自另一个组件,我花了一段时间试着调试它,然后得出结论,它实际上不是抛出错误的组件!将文件名作为错误消息的一部分可能会有所帮助。希望这对别人有帮助。

哦,顺便说一句,我不确定有人提到过 undefined 将引发错误:

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

这个问题在屏幕上弹出的另一种方式是,当你给出一个条件并在其中插入回报时。如果条件不满足,则无需返回任何内容。因此出现了错误。

export default function Component({ yourCondition }) {

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

我只有在产品构建上有相同的错误。 在发展中,一切正常,没有任何警告。

问题是评论行

错误

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

好啊

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

在下一行的return not后面写括号。

不准确的

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

对的

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

示例:const Main=()=>(…然后是您的代码…)。

我的功能组件与

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>

   )            
    })

}

相同的错误,不同的情况。我把这个贴在这里是因为有人可能和我的处境一样。

我使用的是如下所示的上下文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>
  )
}

我也犯了同样的错误,但我想不出来。我有一个功能组件导出,然后导入到我的应用程序组件。我用箭头函数格式设置了我的功能组件,结果发现了错误。我把一个“return”语句放在卷发的braquets中,“return()”,把我所有的JSX放在paren中。希望这对某些人有用,而不是多余的。看起来stackoverflow会自动将其格式化为一行,然而,在我的编辑器VSCode中,它跨越了多行。也许没什么大不了的,但要简洁。

import React from 'react';

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

export default Layout;