Javascript 没有从render返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null

我在React中有一个组件，我正在index.js中导入该组件，但它给出了以下错误：

没有从render返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回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'));

从“React”导入React；
从“react dom”导入react dom；
从“./components/Search_Bar”导入搜索栏；
常量API_键='AizasyncpDoboliqn87ykjkz-cxzdAsvYD1F-U'；
常量应用=（）=>{
返回
(
);
}
ReactDOM.render（，document.querySelector（'#root'）；

组成部分：

import React from 'react';

const Search_Bar = () =>
{
    return <input />;
};

export default Search_Bar;

从“React”导入React；
常量搜索栏=（）=>
{
返回；
};
导出默认搜索栏；

得到了答案：我不应该在

返回（）之后使用括号。这项工作：

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

返回

如果要写入多行，则返回（…

开始括号应该与

return

位于同一行。我在render（）方法中遇到了相同的问题。 当您从render（）返回时，会出现以下问题：

render（）{
返回
(
JSX来了！
);
}

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

尝试使用：

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

render（）{
返回(
JSX来了！
);
}

---

这将解决错误

如果您使用无状态组件作为箭头函数，则内容需要放在括号“（）”中而不是括号“{}”，并且必须删除返回函数

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

const Search\u Bar=（）=>(
; 
);

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

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

而不是

import MyComponent from './components/MyComponent'

---

使用后者解决了问题。

问题在返回中，请尝试以下操作：

return(
);

---

这解决了我的问题

此错误可以从以下几个原因看出：

如上所述，在新行上开始括号

错误：

render() {
  return  
  (
    <div>I am demo data</div>
  )
}

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

在上面的示例中，

return

语句末尾的分号没有任何区别

这也可能是由于布线中使用了错误的支架造成的：

错误：

render() {
  return  
  (
    <div>I am demo data</div>
  )
}

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

---

将括号写在返回的旁边，不在下一行

不正确

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

正确的

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

---

我收到了这个错误消息，但这确实是一个基本错误，我复制/粘贴了另一个组件作为模板，删除了render（）中的所有内容然后导入它并将其添加到父JSX中，但尚未重命名组件类。因此，该错误似乎来自另一个组件，我花了一段时间尝试调试它，然后确定它不是抛出错误的组件！将文件名作为错误消息的一部分会很有帮助。希望这对别人有帮助

哦，旁注我不确定是否有人提到返回

undefined

会抛出错误：

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

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

---

同样的错误，不同的情况。我在这里发布这篇文章是因为有人可能和我的情况相同

我使用的上下文API如下所示

export const withDB = Component => props => {
    <DBContext.Consumer>
        {db => <Component {...props} db={db} />}
    </DBContext.Consumer>
}

---

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

return(
)

import React from 'react';

const Header = () => {
    <nav class="navbar"></nav>
}

export default Header;

但不是这样：

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）并使用

service-s build运行时，就会发生错误

结果表明，如果渲染块中有注释（如下图所示），则会导致错误：

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


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

ReactDOM.render(
//这将导致错误！
,
document.getElementById（“根”）
);

我正在分享，以防其他人遇到具有相同问题的此线程。
我遇到了此问题，尽管我的问题略有不同。在此处发布可能有助于其他人

我有

const布局=（{children}）=>{
{儿童}
};

但它必须是：

const Layout = ({ children }) => (
    <div className="mx-4 my-3">
      <Header />
      <Menu />
      {children}
      <Footer />
    </div>
);

const布局=（{children}）=>(
{儿童}
);

我想这是制表符和空格的不同。我不知道为什么它会在意…
我只有在生产版本上有相同的错误。
在开发阶段，一切正常，没有任何警告

问题是评论行

错误

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

return（//注释
福
)

正常

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

//注释
返回(
福
)
这可能是因为您将使用功能组件，并且您将使用这些“{}”大括号而不是“（）”
示例：const Main=（）=>（…然后是您的代码…）。
基本上，您必须将代码封装在这些括号“（）”中。
I w
import React from 'react';

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

export default Layout;

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>

   )            
    })

}

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

  function Input(props) { return   
<input type={props.type}  placeholder={props.placeholder} />  }

> function Input(props) { return <input type={props.type} placeholder={props.placeholder} />  }