reactjs - recargar - Nada fue devuelto desde el render. Esto generalmente significa que falta una declaración de devolución. O, para no generar nada, devuelve nulo.

¿con qué método del ciclo de vida podemos optimizar render?

Question

Tengo un componente en React que estoy importando en index.js, pero está dando este error:

Nada fue devuelto desde el render. Esto generalmente significa que falta una declaración de devolución. O, para no generar nada, devuelve nulo.

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

componente:

import React from ''react'';

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

export default Search_Bar;

Answer 1

Dado que está utilizando un componente sin estado como una función de flecha, el contenido debe aparecer entre paréntesis "()" en lugar de corchetes "{}" y debe eliminar la función de retorno.

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

Answer 2

El problema está en la devolución, intente esto:

return(
);

esto resolvió mi problema

Answer 3

En mi caso, este mismo error fue causado por la forma en que estaba importando mi componente personalizado de la clase que llama, es decir, estaba haciendo

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

en lugar de

import MyComponent from ''./components/MyComponent''

El uso de este último resuelto el problema.

Answer 4

Este error se puede ver por varias razones:

1. Como se mencionó anteriormente debido al inicio del paréntesis de la nueva línea.

   Error:

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

   Manera correcta de implementar render:

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

   En el ejemplo anterior, el punto y coma al final de la declaración de devolución no hará ninguna diferencia.

2. También puede ser causado debido a los corchetes incorrectos utilizados en el enrutamiento:

   Error:

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

   Manera correcta:

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

En el ejemplo de error, hemos utilizado las llaves, pero tenemos que usar corchetes redondos en lugar de ellos. Esto también da el mismo error.

Answer 5

Obtuve la respuesta: no debería usar paréntesis después de return () . Esto funciona:

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

Si desea escribir multilínea, return ( ...

Su paréntesis de inicio debe estar en la misma línea que la return .

Answer 6

Teníamos un componente encerrado en las llaves, es decir, { y } :

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

Reemplazándolos con los corchetes, es decir ( y ) solucionó el problema:

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

Answer 7

Tuve el mismo problema en el método render () . El problema viene cuando regresas de render () como:

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

Es decir, si inicia el paréntesis en una nueva línea.

Trate de usar:

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

Esto solucionará el error.