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

Question

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

Answer 1

我在render()方法中遇到了同样的问题.从render()返回时出现问题:

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

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

尝试使用:

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

这将解决错误

Answer 2

鉴于您使用无状态组件作为箭头函数,内容需要括号"()"而不是括号"{}",您必须删除返回函数.

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

Answer 3

问题在于回归,试试这个:

return(
);

这解决了我的问题

Answer 4

This error can be seen for a number of reasons:

1. 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() {
  return (
    <div>I am demo html</div>
  );
}

In the above example, the semicolon at the end of the return statement will not make any difference.

2. 也可能是由于路由中使用了错误的括号引起的：

错误：

export default () => {
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
}

正确做法：

export default () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={ DemoComponent } />
    </Switch>
  </BrowserRouter>
)

在错误示例中，我们使用了花括号，但我们必须使用圆括号。这也给出了同样的错误。

Answer 5

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

Answer 6

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

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

删除这个模拟（实际上并不需要）立即解决了我的问题。

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

Answer 7

我遇到了这个线程来寻找这个错误的答案。

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

我正在分享以防其他人遇到同样问题的这个线程。

Answer 8

得到答案：我不应该在 之后使用括号 return ()。这有效：

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

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

您的起始括号应与return.

Answer 9

我们有一个包含在花括号中的组件，即{和}：

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

用圆括号 ie 替换它们(并)解决了问题：

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