渲染没有返回任何东西。这通常意味着返回语句丢失。或者，如果没有渲染，返回 null

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

渲染没有返回任何东西。这通常意味着返回语句丢失。或者，如果没有渲染，返回 null

索引:

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;
226499 次浏览
小开

得到了答案: 我不应该在 return ()之后使用括号:

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

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

你的起始括号应该和 return在同一行。

小开
最佳答案

我在 提交()方法中遇到了同样的问题。 The problem comes when you return from 提交() as :

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

换句话说，如果你在一个新的行开始括号

尝试使用:

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

这将解决错误

小开

假设您使用无状态组件作为箭头函数，那么内容需要放在括号“()”而不是括号“{}”中，并且必须删除返回函数。

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

In my case this very same error was caused by the way I was importing my custom component from the caller class i.e. I was doing

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

instead of

import MyComponent from './components/MyComponent'

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

小开

问题在于回报，试试这个:

return(
);

这解决了我的问题

小开

这个错误有以下几个原因:

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

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

小开

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

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

用圆括号(即 (和 ))取代它们解决了这一问题:

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

在下一行写圆括号并返回不在下一行。

不对

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

Correct

return(
statement1
statement2
.........
.........
)
小开

我得到了这个错误消息，但这是一个非常基本的错误，我复制/粘贴了另一个 Component 作为模板，删除了 render ()中的所有内容，然后导入它，并将其添加到父 JSX 中，但是还没有重命名组件类。所以这个错误看起来像是来自另一个组件，我花了一段时间来调试它，然后才发现它实际上不是那个组件抛出的错误！将文件名作为错误消息的一部分会很有帮助。希望这对谁有帮助。

哦，附注: 我不确定是否有人提到返回 undefined会抛出错误:

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

同样的错误，不同的情况。我把这个贴在这里是因为有人可能会遇到和我一样的情况。

我使用的上下文 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>
)
}
小开

问题似乎是回车的括号。 括号应与返回语句一致，如下所示:

return(
)

but not this way:

return
(
)
小开

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

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

删除这个模拟(实际上并不需要)立即修复了我的问题。

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

小开

这个问题出现在屏幕上的另一种方式是，当您给出一个条件并在其中插入返回值时。如果条件不满足，那么就没有返回的东西了。所以才会出错。

export default function Component({ yourCondition }) {


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

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

小开

我在寻找 这个错误的答案时偶然发现了这个帖子。

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

结果是，如果在呈现块中有注释，就像下面这样，它会导致错误:

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

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

小开

我只在生产构建中有相同的错误。 在开发过程中一切正常，没有任何征兆。

问题出在一条评论线上

ERROR

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

好的

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

这可能是因为您将使用函数组件，并且在这种情况下您将使用这些“{}”大括号而不是“()” Example : const Main = () => ( ... then your code ... ). 基本上，您必须将您的代码包含在这些括号’()’中。

小开

我得到了相同的错误，不能弄清楚它。我有一个函数组件导出，然后导入到我的应用程序组件。我将函数组件设置为箭头函数格式，并得到了错误。我将“ 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;
小开

I had the same problem with 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;
小开

在我的函数组件中出现了与

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>


)
})


}

提交答案