Ничего не было возвращено из рендера. Обычно это означает, что оператор возврата отсутствует. Или, чтобы ничего не делать, возвращаем null

У меня есть компонент в React, который я импортирую в index.js, но он дает эту ошибку:

Ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не визуализировать, верните 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;

Ответ 1

У меня была такая же проблема в методе render(). Проблема возникает, когда вы возвращаетесь из render() как:

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

то есть. если вы начинаете скобки в новой строке

Попробуйте использовать:

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

Это решит ошибку

Ответ 2

Учитывая, что вы используете компонент без сохранения состояния в качестве функции стрелки, содержимое должно быть заключено в скобки "()" вместо скобок "{}", и вам необходимо удалить функцию возврата.

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

Ответ 3

проблема в возврате, попробуйте это:

return(
);

это решило мою проблему

Ответ 4

Получил ответ: я не должен использовать скобки после return(). Это работает:

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

Если вы хотите написать многострочное, то return (...

Ваша начальная скобка должна быть в той же строке, что и return.

Ответ 5

У нас был компонент, заключенный в фигурные скобки, то есть { и }:

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

Замена их круглыми скобками, т.е. ( и ) исправила проблему:

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

Ответ 6

В моем случае эта самая ошибка была вызвана тем, как я импортировал свой пользовательский компонент из класса вызывающего, т.е.

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

вместо

import MyComponent from './components/MyComponent'

использование последнего решило проблему.

Ответ 7

Эта ошибка может быть замечена по ряду причин:

Как уже упоминалось выше, начинаются круглые скобки на новой строке.

Ошибка:

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

Правильный способ реализации render:

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

В приведенном выше примере точка с запятой в конце оператора return не будет иметь никакого значения.

Это также может быть вызвано неправильными скобками, используемыми в маршрутизации:

Ошибка:

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

Правильный путь:

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

В примере ошибки мы использовали фигурные скобки, но вместо этого мы должны использовать круглые скобки. Это также дает ту же ошибку.

Ответ 8

напишите скобки рядом с возвратом, а не в следующей строке.

Неверный return ( statement1 statement2.............. )

Правильный

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

Ответ 9

Я получил это сообщение об ошибке, но это была действительно основная ошибка, я скопировал/вставил другой компонент в качестве шаблона, удалил все из render(), затем импортировал его и добавил в родительский JSX, но еще не переименовал класс компонента. Итак, ошибка выглядела так, как будто она исходила от другого компонента, который я потратил некоторое время, пытаясь отладить его, прежде чем выяснить, что это не тот компонент, который выдает ошибку! Было бы полезно иметь имя файла как часть сообщения об ошибке. Надеюсь, это кому-нибудь поможет.

О, примечание, я не уверен, что кто-то упомянул, что возврат undefined приведет к ошибке:

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