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

IT技术 javascript reactjs
2021-04-09 11:18:05

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

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

索引.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;
6个回答

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

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

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

尝试使用：

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

这将解决错误

哇，不敢相信没有编译器警告。谢谢，额外的换行格式是问题所在。
2021-05-28 11:18:05
我怀疑这是自动分号插入的结果。它可能将第一个示例解析为“return; (...);”
2021-05-31 11:18:05
对于我挣扎了几个小时的事情来说，这是一个如此简单的解决方案。多次查看我的代码。
2021-06-02 11:18:05
这个问题占用了我 30 分钟，感谢您解决了这个问题。
2021-06-08 11:18:05
哈哈哈，我只是浪费了很多时间来挖掘 redux 表单代码，并想知道最新版本中的“连接”功能是否发生了某种变化。
2021-06-10 11:18:05

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

const Search_Bar= () => (
    <input />; 
);
这解决了我的问题。在我路由到的组件中，我的 => 箭头后面有括号而不是括号。太习惯于标准的箭头函数
2021-06-01 11:18:05

问题出在回报上，试试这个：

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

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

这正是我的问题所在。路由器中的错误附加;)
2021-06-02 11:18:05

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

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

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

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

这正是我的问题所在！作为旁注，如果您希望那种模拟仍然存在，我通过将其更改为： jest.mock("components/MyComponent", () => ({ children }) => <>{children }</>); 据我所知，这应该是上面代码片段的更安全版本，无论是否有儿童都可以正常工作。
2021-05-29 11:18:05
@DJ_R 感谢您的评论！<>{children}</> 正是正确的解决方案
2021-06-12 11:18:05
其它你可能感兴趣的问题
上一篇在 React Native 中调整图像大小 下一篇在 React 中管理用户会话的最佳方式是什么？