I'm just new in ReactJS and I have a problem. I can't solve it. It seems everything is all right, but still console puts me:
A valid React element (or null) must be returned. You may have
returned undefined, an array or some other invalid object.
Here's my 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;
Thanks for help!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…