Vom Rendern wurde nichts zurückgegeben. Dies bedeutet normalerweise, dass eine return-Anweisung fehlt. Oder, um nichts zu rendern, geben Sie null zurück

Ich habe eine Komponente in React, die ich in index.js importiere, aber es gibt diesen Fehler:

Vom Rendern wurde nichts zurückgegeben. Dies bedeutet normalerweise, dass eine return-Anweisung fehlt. Oder, um nichts zu rendern, geben Sie null zurück

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

Komponente:

import React from 'react';

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

export default Search_Bar;

Ich hatte das gleiche Problem bei der render () -Methode. Das Problem tritt auf, wenn Sie von render () wie folgt zurückkehren :

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

dh wenn Sie die Klammer in einer neuen Zeile beginnen

Versuchen Sie es mit:

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

Dies wird den Fehler beheben

Da Sie eine zustandslose Komponente als Pfeilfunktion verwenden, muss der Inhalt in Klammern "()" anstelle von Klammern "{}" stehen und Sie müssen die Rückgabefunktion entfernen.

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

Das Problem liegt in der Rückgabe. Versuchen Sie Folgendes:

return(
);

Das hat mein Problem gelöst

Dieser Fehler kann aus mehreren Gründen auftreten:

1. Wie oben erwähnt, beginnt die Klammer in einer neuen Zeile.

Error:

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

Richtige Implementierung render:

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

Im obigen Beispiel macht das Semikolon am Ende der returnAnweisung keinen Unterschied.

2. Dies kann auch an den falschen Klammern liegen, die im Routing verwendet werden:

Error:

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

Der richtige Weg:

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

Im Fehlerbeispiel haben wir geschweifte Klammern verwendet, aber wir müssen stattdessen runde Klammern verwenden. Dies gibt auch den gleichen Fehler.

Ich habe die Antwort bekommen: Ich sollte danach keine Klammern mehr verwenden return (). Das funktioniert:

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

Wenn Sie mehrzeilig schreiben möchten, dann return ( ...

Ihre Startklammer sollte in derselben Zeile stehen wie return.

Wir hatten eine Komponente in den geschweiften Klammern eingeschlossen, dh {und }:

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

Ersetzen Sie sie durch die runden Klammern, dh (und )beheben Sie das Problem:

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

Ich bin auf diesen Thread gestoßen, um eine Antwort auf diesen Fehler zu finden .

Das Seltsame für mich war, dass alles funktionierte, während ich in dev lief (npm start), aber der Fehler trat auf, wenn die App erstellt wurde (npm run build) und dann mit ausgeführt wurde serve -s build .

Es stellt sich heraus, dass wenn Sie Kommentare im Renderblock haben, wie im Folgenden beschrieben, dies den Fehler verursacht:

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

Ich teile für den Fall, dass jemand anderes auf diesen Thread mit dem gleichen Problem stößt.

In meinem Fall wurde derselbe Fehler durch die Art und Weise verursacht, wie ich meine benutzerdefinierte Komponente aus der Aufruferklasse importierte, dh ich tat es

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

anstatt

import MyComponent from './components/MyComponent'

mit letzterem wurde das Problem gelöst.

Das Problem scheinen die Klammern bei der Rückkehr zu sein. Klammern sollten mit der return-Anweisung wie folgt übereinstimmen:

return(
)

aber nicht so:

return
(
)  

Ich habe diese Fehlermeldung erhalten, war aber ein wirklich grundlegender Fehler. Ich hatte eine andere Komponente als Vorlage kopiert / eingefügt, alles aus render () entfernt, dann importiert und dem übergeordneten JSX hinzugefügt, die Komponentenklasse jedoch noch nicht umbenannt. Dann sah der Fehler so aus, als stamme er von einer anderen Komponente, die ich eine Weile lang getestet habe, bevor ich herausgefunden habe, dass es nicht die Komponente war, die den Fehler auslöste! Wäre hilfreich gewesen, den Dateinamen als Teil der Fehlermeldung zu haben. Hoffe das hilft jemandem.

Oh, eine Randnotiz Ich bin mir nicht sicher, ob jemand erwähnt hat, dass die Rückkehr undefinedden Fehler auslösen wird:

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

Ich habe diesen Fehler beim Ausführen von Jest-Tests festgestellt. Eine der Komponenten wurde in der Setup-Datei verspottet. Als ich versuchte, die eigentliche Komponente in einem Test zu verwenden, wurden sehr unerwartete Ergebnisse erzielt.

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

Das Entfernen dieses Modells (das eigentlich nicht benötigt wurde) hat mein Problem sofort behoben.

Vielleicht ersparen Sie sich dadurch einige Stunden Recherche, wenn Sie wissen, dass Sie korrekt von Ihrer Komponente zurückkehren.

Gleicher Fehler, andere Situation. Ich poste dies hier, weil sich jemand in der gleichen Situation wie ich befindet.

Ich habe die Kontext-API wie unten verwendet.

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

Im Grunde gibt Ihnen die Fehlermeldung die Antwort.

Vom Rendern wurde nichts zurückgegeben. Dies bedeutet normalerweise, dass eine return-Anweisung fehlt

withDBsollte einen HTML-Block zurückgeben. Aber es gab nichts zurück. Durch die Überarbeitung meines Codes nach unten wurde mein Problem behoben.

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

Eine andere Möglichkeit, wie dieses Problem auf Ihrem Bildschirm angezeigt werden kann, besteht darin, eine Bedingung anzugeben und die Rückgabe darin einzufügen. Wenn die Bedingung nicht erfüllt ist, gibt es nichts zurückzugeben. Daher der Fehler.

export default function Component({ yourCondition }) {

    if(yourCondition === "something") {
        return(
            This will throw this error if this condition is false.
        );
    }
}

Alles, was ich getan habe, war, eine äußere Rückgabe mit null einzufügen, und es hat wieder gut funktioniert.

Ich bin auf dieses Problem gestoßen, obwohl meins etwas anders ist. Hier posten, um vielleicht irgendwann jemandem zu helfen.

ich hatte

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

Aber es musste sein:

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

Es ist ein Unterschied zwischen Tabulatoren und Leerzeichen, denke ich. Ich bin mir nicht sicher, warum es mich interessieren würde ...

Ich habe den gleichen Fehler nur beim Produktionsaufbau. In der Entwicklung war alles in Ordnung, keine Warnung.

Das Problem war eine Kommentarzeile

ERROR

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

OK

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

Schreiben Sie Klammern neben, um nicht in die nächste Zeile zurückzukehren.

Falsch

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

Richtig

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

Dies könnte daran liegen, dass Sie eine Funktionskomponente verwenden und diese '{}' Klammern anstelle von '()' verwenden. Beispiel: const Main = () => (... dann Ihr Code ...). Grundsätzlich müssen Sie Ihren Code in diese Klammern '()' einschließen.