javascript-渲染未返回任何内容。 这通常意味着缺少return语句。 或者,不渲染,返回nu

我在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;
pKay asked 2020-02-11T01:39:24Z
9个解决方案
84 votes

我在render()方法中遇到了同样的问题。当您从render()返回时,问题来了:

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

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

尝试使用:

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

这样可以解决错误

devsourav answered 2020-02-11T01:39:51Z
18 votes

假设您将无状态组件用作箭头函数,则内容需要放入括号“()”而不是括号“ {}”,并且必须删除返回函数。

const Search_Bar= () => (
    <input />; 
);
Joel Santos answered 2020-02-11T01:40:11Z
12 votes

问题出在返回中,请尝试以下操作:

return(
);

这解决了我的问题

Diego Santa Cruz Mendezú answered 2020-02-11T01:40:35Z
4 votes

得到了答案:我不应在2742194857312712781312之后使用括号。

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

如果要编写多行,则return

您的起始括号应与2742194857312781381312在同一行。

pKay answered 2020-02-11T01:41:04Z
4 votes

我们在花括号中包含一个组件,即()

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

用圆括号代替它们,即()解决了以下问题:

const SomeComponent = () => (<div> Some Component Page </div>)
student answered 2020-02-11T01:41:28Z
3 votes

就我而言,这是我从调用程序类中导入自定义组件的方式引起的,即我正在执行此操作

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

代替

import MyComponent from './components/MyComponent'

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

Tom answered 2020-02-11T01:41:57Z
1 votes

出现此错误的原因有很多:

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

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

Nabhdeep Singh answered 2020-02-11T01:42:52Z
0 votes

在下一行写括号以在下一行不返回。

不正确的return( statement1 statement2 ......... ......... )

正确

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

Hitesh Jangid answered 2020-02-11T01:43:25Z
0 votes

我收到了此错误消息,但这是一个非常基本的错误,我已经将另一个组件复制/粘贴为模板,从render()中删除了所有内容,然后将其导入并添加到父级JSX中,但尚未重命名组件类。 因此,错误看起来像是来自另一个组件,我花了一段时间尝试对其进行调试,然后才能发现它实际上不是该组件引发错误! 将文件名作为错误消息的一部分会有所帮助。 希望这对某人有帮助。

哦,旁注说明,我不确定有人提到返回undefined会引发错误:

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

Simon Hutchison answered 2020-02-11T01:43:50Z
translate from https://stackoverflow.com:/questions/46741247/nothing-was-returned-from-render-this-usually-means-a-return-statement-is-missi