Valide Réagir élément (ou null) doit être retourné. Vous pouvez avoir retourné indéfini, un tableau ou quelque autre objet non valide

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

Valide Réagir élément (ou null) doit être retourné. Vous pouvez avoir
retourné indéfini, un tableau ou quelque 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!

OriginalL'auteur itgirl1234 | 2017-03-01

reactive-programming reactjs

Problème est dans l'instruction de retour dans Pokemon composant, Parce que quand vous utilisez:

return
   <div>
     ...
   </div>

Elle sera traitée comme:

return ;    //Automatic semicolon insertion

<div>
   ...
</div>

Et cela signifie que vous n'êtes pas de retour d'un élément valide.

Vérifier cette réponse pour plus de détails sur Automatique Point-Virgule Insertion.

Solutions:

Flétrir l'emballage de tous les éléments par () comme ceci:

return (
 ....
)

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

return <div>
   ...
       </div>

Utiliser cette partie, il va travailler:

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

Merci! C'est travaillé!

OriginalL'auteur Mayank Shukla

0

Cette erreur est à cause de la façon que vous donnez de la valeur à "contenu"

Lorsque vous définissez une valeur à une sorte de "html" est une valeur, il faut utiliser cette syntaxe:
```
content = (<div/>);
```
essayez-le et laissez-moi savoir si cela fonctionne!

bonne chance!

Ce n'est pas vrai pour JSX.
J'ai juste essayé d'ajouter des parenthèses pour tous les if et else et il y a toujours le même problème.
Pourquoi n'est pas vrai? Je veux dire, Im dans un projet react et c'est de cette façon que je encapsuler du code HTML avant de l'imprimer dans la fonction retour... Si vous ne pouvez pas faire ceci: const données = (<div>INFORMATIONS</div>); retour = (<div>{données}</div>); Dites-moi comment le feriez-vous?
En retour, les parenthèses sont nécessaires, non pas lorsque le paramètre est une variable ligne.

OriginalL'auteur Borja Navarro
0

Lorsque vous utilisez ES6 syntaxe du assurez-vous de faire les suivants
```
const App = ()=> (
  <div>
        <p>Adam</p>
        <p>Alex</p>
  </div>
)
```
Ici le "()" est important et, dit le texte placé entre crochets est le jsx retourné

Si vous rencontrez un seul retour à la ligne, alors vous pouvez faire ce
```
const App = ()=> <h1>Hello</h1>
```
OriginalL'auteur Ignatius Andrew

Vous devez vous connecter pour publier un commentaire.