web-dev-qa-db-fra.com

Rien n'a été rendu de rendre. Cela signifie généralement qu'une déclaration de retour est manquante. Ou, pour ne rien rendre, renvoyer null

J'ai un composant dans React que j'importe dans index.js, mais il génère cette erreur:

Rien n'a été rendu de rendre. Cela signifie généralement qu'une déclaration de retour est manquante. Ou, pour ne rien rendre, renvoyer 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'));

composant:

import React from 'react';

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

export default Search_Bar;
javascriptreactjs
48
pKay

J'ai eu le même problème dans la méthode render () . Le problème survient lorsque vous revenez de render () en tant que:

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

c'est-à-dire si vous commencez la parenthèse dans une nouvelle ligne

Essayez d'utiliser:

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

Cela résoudra l'erreur

81
devsourav

Étant donné que vous utilisez un composant sans état en tant que fonction de flèche, le contenu doit être placé entre parenthèses "()" au lieu de crochets "{}" et vous devez supprimer la fonction de retour.

const Search_Bar= () => (
    <input />; 
);
16
Joel Santos

le problème est dans le retour, essayez ceci:

return(
);

cela a résolu mon problème

12
Diego Santa Cruz Mendezú

Vous avez la réponse: je ne devrais pas utiliser de parenthèses après return (). Cela marche:

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

Si vous voulez écrire sur plusieurs lignes, alors return ( ...

Votre parenthèse de départ doit être sur la même ligne que return.

4
pKay

Nous avons placé un composant entre accolades, à savoir { et }:

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

En les remplaçant par les crochets, c’est-à-dire ( et ), le problème a été résolu:

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

Dans mon cas, la même erreur a été causée par la manière dont j'ai importé mon composant personnalisé à partir de la classe d'appelant, c'est-à-dire que je faisais.

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

au lieu de

import MyComponent from './components/MyComponent'

utiliser ce dernier a résolu le problème.

3
Tom

Cette erreur peut être vue pour plusieurs raisons:

  1. Comme mentionné ci-dessus, commencer la parenthèse sur une nouvelle ligne.

Erreur:

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

Manière correcte d'implémenter render:

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

Dans l'exemple ci-dessus, le point-virgule à la fin de l'instruction return ne fera aucune différence.

  1. Cela peut également être dû aux mauvais crochets utilisés dans le routage:

Erreur:

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

Manière correcte:

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

Dans l'exemple d'erreur, nous avons utilisé des accolades, mais nous devons utiliser des parenthèses rondes. Cela donne aussi la même erreur.

1
Nabhdeep Singh

J'ai eu ce message d'erreur mais c'était une erreur très basique, j'avais copié/collé un autre composant en tant que modèle, tout supprimé de render (), puis importé et ajouté au JSX parent mais je n'avais pas encore renommé la classe de composant. Alors, l’erreur semblait provenir d’un autre composant que j’ai passé un moment à essayer de la déboguer avant de déterminer que ce n’était pas réellement ce composant qui lançait l’erreur! Cela aurait été utile d’avoir le nom de fichier dans le message d’erreur. J'espère que ça aide quelqu'un.

Oh, une note de côté, je ne suis pas sûr que quiconque ait mentionné que renvoyer undefined lève l'erreur:

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

écrivez parenthèse à côté pour retourner pas dans la ligne suivante.

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

Correct

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

0
Hitesh Jangid