У меня есть компонент в 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 = () ={amp}gt; { return ( {amp}lt;div{amp}gt; {amp}lt;Search_Bar /{amp}gt; {amp}lt;/div{amp}gt; ); } ReactDOM.render({amp}lt;App /{amp}gt;, document.querySelector('#root')); 

компонент:

 import React from 'react'; const Search_Bar = () ={amp}gt; { return {amp}lt;input /{amp}gt;; }; export default Search_Bar; 

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

 render() { return ( {amp}lt;div{amp}gt;Here comes JSX !{amp}lt;/div{amp}gt; ); } 

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

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

 render() { return ( {amp}lt;div{amp}gt;Here comes JSX !{amp}lt;/div{amp}gt; ); } 

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

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

 const Search_Bar= () ={amp}gt; ( {amp}lt;input /{amp}gt;; ); 

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

 return( ); 

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

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

 const SomeComponent = () ={amp}gt; {{amp}lt;div{amp}gt; Some Component Page {amp}lt;/div{amp}gt;} 

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

 const SomeComponent = () ={amp}gt; ({amp}lt;div{amp}gt; Some Component Page {amp}lt;/div{amp}gt;) 

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

 return {amp}lt;div{amp}gt; {amp}lt;Search_Bar /{amp}gt; {amp}lt;/div{amp}gt; 

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

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

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

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

Ошибка:

 render() { return ( {amp}lt;div{amp}gt;I am demo data{amp}lt;/div{amp}gt; ) } 

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

 render() { return ( {amp}lt;div{amp}gt;I am demo html{amp}lt;/div{amp}gt; ); } 

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

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

Ошибка:

 export default () ={amp}gt; { {amp}lt;BrowserRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path='/' component={ DemoComponent } /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/BrowserRouter{amp}gt; } 

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

 export default () ={amp}gt; ( {amp}lt;BrowserRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path='/' component={ DemoComponent } /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ) 

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

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

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

вместо того

 import MyComponent from './components/MyComponent' 

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

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

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

Верный

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

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

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

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

Та же ошибка, другая ситуация. Я публикую это здесь, потому что кто-то может оказаться в той же ситуации, что и я.

Я использовал контекстный API, как показано ниже.

 export const withDB = Component ={amp}gt; props ={amp}gt; { {amp}lt;DBContext.Consumer{amp}gt; {db ={amp}gt; {amp}lt;Component {...props} db={db} /{amp}gt;} {amp}lt;/DBContext.Consumer{amp}gt; } 

Таким образом, в основном сообщение об ошибке дает вам ответ.

Ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата

withDB должен вернуть блок html. Но это ничего не возвращало. Пересмотр моего кода ниже решил мою проблему.

 export const withDB = Component ={amp}gt; props ={amp}gt; { return ( {amp}lt;DBContext.Consumer{amp}gt; {db ={amp}gt; {amp}lt;Component {...props} db={db} /{amp}gt;} {amp}lt;/DBContext.Consumer{amp}gt; ) } 

Проблема, кажется, в скобках по возвращении. Круглые скобки должны соответствовать выражению return вроде этого:

 return( ) 

но не так

 return ( ) 

Я столкнулся с этой ошибкой при запуске Jest тестов. Один из компонентов подвергался насмешке в установочном файле, поэтому, когда я попытался использовать настоящий компонент в тесте, я получил очень неожиданные результаты.

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

Удаление этой насмешки (которая на самом деле не была нужна) немедленно решило мою проблему.

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