web-dev-qa-db-fra.com

Un élément React valide (ou null) doit être renvoyé. Vous avez peut-être retourné undefined, un tableau ou un autre objet non valide

Je suis nouveau dans ReactJS et j'ai un problème. Je ne peux pas le résoudre. Il semble que tout va bien, mais toujours console me met: 

Un élément React valide (ou null) doit être renvoyé. Vous avez peut-être renvoyé Non défini, un tableau ou un autre objet non valide.

Voici mon code: 

import React from 'react';
import ReactDOM from 'react-dom';
import fetch from 'isomorphic-fetch';
import Pokemon from './Pokemon';

class PokemonList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      species: [],
      fetched: false,
      loading: false,
    };
  }
  componentWillMount(){
    this.setState({
      loading : true
    });
    fetch('http://pokeapi.co/api/v2/pokemon?limit=151').then(res => res.json())
    .then(res =>{
      this.setState({
        species : res.results,
        loading : true,
        fetched : true
      });
    });
  }
  render() {
    const {fetched, loading, species} = this.state;
    let content;
    //This if seems to be the problem
    if(fetched){
      content =
      <div className="pokemon--species--list">
        {species.map((pokemon,index) => <Pokemon key={pokemon.name} id={index+1} pokemon={pokemon}/>)}
      </div>;
    }
    else if(loading && !fetched){
        content = <p> Loading ...</p>;
    }
    else{
      content = <div/>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}

export default PokemonList;

Pokemon.js

import React from 'react';
import ReactDOM from 'react-dom';


class Pokemon extends React.Component {
  render() {
    const {pokemon, id} = this.props;
    return
      <div className="pokemon--spacies">
        <div className="pokemon--spacies--container">
          <div className="pokemon--spacies--Sprite">
            <img src={`/public/sprites/${id}.png`} />
          </div>
          <div className="pokemon--spacies--name"> {pokemon.name }</div>
        </div>
      </div>;
  }
}

export default Pokemon;

Merci pour l'aide!

reactjsreactive-programming
4
itgirl1234

Le problème est que vous avez plusieurs instructions dans render et que vous devez donc les entourer dans () Voir l'extrait ci-dessous. De plus, le ( doit se trouver sur la même ligne que return, sinon il sera traité comme un return qui ne renvoie fondamentalement rien. 

class Pokemon extends React.Component {
  render() {
    var content = <div></div>
    return (
      <div className="pokemon--spacies">
        <div className="pokemon--spacies--container">
          <div className="pokemon--spacies--Sprite">
            {content}
          </div>
          <div className="pokemon--spacies--name"> Hello</div>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Pokemon/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

3
Shubham Khatri

Le problème est dans la déclaration de retour dans le composant Pokemon, Parce que lorsque vous utilisez:

return
   <div>
     ...
   </div>

Il sera traité comme:

return ;    //Automatic semicolon insertion

<div>
   ...
</div>

Et cela signifie que vous ne retournez pas d'élément valide.

Cochez cette réponse pour plus de détails surInsertion automatique du point-virgule.

Solutions:

Wither envelopper tous les éléments par () comme ceci:

return (
 ....
)

ou mettez la div dans la même ligne de retour, comme ceci:

return <div>
   ...
       </div>

Utilisez cette partie cela fonctionnera:

class Pokemon extends React.Component {
  render() {
    const {pokemon, id} = this.props;
    return(
      <div className="pokemon--spacies">
        <div className="pokemon--spacies--container">
          <div className="pokemon--spacies--Sprite">
            <img src={`/public/sprites/${id}.png`} />
          </div>
          <div className="pokemon--spacies--name"> {pokemon.name }</div>
        </div>
      </div>);
  }
}
6
Mayank Shukla

Cette erreur est due à la façon dont vous donnez de la valeur au "contenu"

Lorsque vous définissez une valeur comme une sorte de "html", vous devez utiliser cette syntaxe:

content = (<div/>);

essayez-le et laissez-moi savoir si cela fonctionne! 

bonne chance!

0
Borja Navarro

Lorsque vous utilisez la syntaxe ES6, assurez-vous de suivre les étapes suivantes

const App = ()=> (
  <div>
        <p>Adam</p>
        <p>Alex</p>
  </div>
)

Ici, le " () " est important et il est indiqué entre crochets que le jsx est retourné

Si vous rencontrez un retour de ligne unique, vous pouvez le faire

const App = ()=> <h1>Hello</h1>
0
Ignatius Andrew