Javascript 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46741247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
提问by pKay
I have a component in React which I am importing in index.js, but it is giving this error:
我在 index.js 中导入了一个 React 组件，但它给出了这个错误：
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null
index.js:
索引.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'));
component:
成分：
import React from 'react';
const Search_Bar = () =>
{
return <input />;
};
export default Search_Bar;
回答by devsourav
I had same problem in the render()method. The problem comes when you return from render()as :
我在render()方法中遇到了同样的问题。当您从render()返回时出现问题：
render() {
return
(
<div>Here comes JSX !</div>
);
}
i.e. if you start the parenthesis in a new line
即如果您在新行中开始括号
Try using:
尝试使用：
render() {
return (
<div>Here comes JSX !</div>
);
}
This will solve the error
这将解决错误
回答by Joel Santos
Given that you are using a stateless component as a arrow function the content needs to get in parenthesis "()" instead of brackets "{}" and you have to remove the return function.
鉴于您使用无状态组件作为箭头函数，内容需要放在括号“()”而不是括号“{}”中，并且您必须删除返回函数。
const Search_Bar= () => (
<input />;
);
回答by Diego Santa Cruz Mendezú
the problem is in the return, try this:
问题出在回报上，试试这个：
return(
);
this solved my problem
这解决了我的问题
回答by Nabhdeep Singh
This error can be seen for a number of reasons:
可以出于多种原因看到此错误：
- As mentioned above, starting the parenthesis on a new line.
- 如上所述，在新行上开始括号。
Error:
错误：
render() {
return
(
<div>I am demo data</div>
)
}
Correct way to implement render:
正确的实现方法render：
render() {
return (
<div>I am demo html</div>
);
}
In the above example, the semicolon at the end of the returnstatement will not make any difference.
在上面的例子中，return语句末尾的分号没有任何区别。
- It can also be caused due to the wrong brackets used in the routing:
- 也可能是由于路由中使用了错误的括号引起的：
Error:
错误：
export default () => {
<BrowserRouter>
<Switch>
<Route exact path='/' component={ DemoComponent } />
</Switch>
</BrowserRouter>
}
Correct way:
正确做法：
export default () => (
<BrowserRouter>
<Switch>
<Route exact path='/' component={ DemoComponent } />
</Switch>
</BrowserRouter>
)
In the error example, we have used curly braces but we have to use round brackets instead. This also gives the same error.
在错误示例中，我们使用了花括号，但我们必须使用圆括号。这也给出了同样的错误。
回答by xameeramir
We had a component enclosed in the curly braces i.e. {and }:
我们有一个包含在花括号中的组件，即{和}：
const SomeComponent = () => {<div> Some Component Page </div>}
Replacing them with the round brackets i.e. (and )fixed the issue:
用圆括号 ie 替换它们(并)解决了问题：
const SomeComponent = () => (<div> Some Component Page </div>)
回答by pKay
Got the answer: I should not use parentheses after return (). This works:
得到答案：我不应该在 return (). 这有效：
return <div> <Search_Bar /> </div>
If you want to write multiline, then return ( ...
如果你想写多行，那么 return ( ...
Your starting parenthesis should be on the same line as return.
您的起始括号应与return.
回答by Tom
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'
using the latter solved the issue.
使用后者解决了这个问题。
回答by besartm
The problem seems to be the parentheses on return. Parentheses should be in line with return statement like this:
问题似乎是返回的括号。括号应该与 return 语句一致，如下所示：
return(
)
but not this way:
但不是这样：
return
(
)
回答by philthathril
I ran into this error when running Jest tests. One of the components was being mocked in the setup file, so when I attempted to use the actual component in a test, I was getting very unexpected results.
我在运行 Jest 测试时遇到了这个错误。其中一个组件在设置文件中被模拟，所以当我尝试在测试中使用实际组件时，我得到了非常意外的结果。
jest.mock("components/MyComponent", () => ({ children }) => children);
Removing this mock (which wasn't actually needed) fixed my issue immediately.
删除这个模拟（实际上并不需要）立即解决了我的问题。
Perhaps this will save you a few hours of research when you know you're returning from your component correctly.
当您知道自己正确地从组件返回时，这可能会为您节省几个小时的研究时间。
回答by Luis Febro
Another way this issue can pop up on your screen is when you give a condition and insert the return inside of it. If the condition is not satisfied, then there is nothing to return. Hence the error.
这个问题可以在你的屏幕上弹出的另一种方式是当你给出一个条件并在其中插入返回值时。如果条件不满足，则没有什么可以返回。因此错误。
export default function Component({ yourCondition }) {
if(yourCondition === "something") {
return(
This will throw this error if this condition is false.
);
}
}
All that I did was to insert an outer return with null and it worked fine again.
我所做的只是插入一个带有 null 的外部返回，它再次正常工作。
