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

Question

J'ai un composant dans React que j'importe dans index.js, mais il donne 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;
 

Answer 1

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

Answer 2

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

Answer 3

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

 return(
);
 

cela a résolu mon problème

Answer 4

Nous avions un composant enfermé dans les accolades, à savoir { et } :

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

Les remplacer par les crochets, c'est-à-dire ( et ) résolu le problème:

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

Answer 5

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 .