必須返回有效的React元素（或null）。你可能已經返回undefined，一個數組或其他無效的對象

Question

我剛剛在ReactJS中出現了新問題，並且遇到了問題。我無法解決它。看起來一切正常，但仍然控制檯讓我：

必須返回一個有效的React元素（或null）。你可能有 返回未定義，數組或其他無效的對象。

這裏是我的代碼：

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; 

感謝您的幫助！

Answer 1

問題是您在render中有多個語句，因此您需要圍繞()中的內容查看下面的代碼片段。 (也必須與return在同一行，否則它將被視爲return只是基本上什麼都沒有返回。

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>

Answer 2

這個錯誤是因爲你給的值改爲「內容」

當設置的值某種「HTML」作爲一種價值的方式，你必須使用此語法：

content = (<div/>); 

試試吧，讓我知道它是否有效！

祝你好運！

Answer 3

問題是在口袋妖怪組件return語句，因爲當你使用：

return 
    <div> 
    ... 
    </div> 

這將被視爲：

return ; //Automatic semicolon insertion 

<div> 
    ... 
</div> 

這意味着你沒有返回一個有效的元素。

查看此答案以獲得有關Automatic Semicolon Insertion的更多詳細信息。

解決方案：

威瑟包裝所有的元素通過()這樣的：

return (
.... 
) 

或將在div在同一行的回報，這樣的：

return <div> 
    ... 
     </div> 

使用這部分它將工作：

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