Nothing was returned from render. This usually mea

问题:

I have a component in React which I am importing in index.js, but it is giving this error:

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, 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'));

component:

import React from 'react';

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

export default Search_Bar;

回答1:

I had same problem in the render() method. The problem comes when you return from render() as :

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

回答2:

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

回答3:

the problem is in the return, try this:

return(
);

this solved my problem

回答4:

Got the answer: I should not use parentheses after return (). This works:

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

If you want to write multiline, then return ( ...

Your starting parenthesis should be on the same line as return.

回答5:

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.

回答6:

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:

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

回答7:

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