web-dev-qa-db-ja.com

有効なReact要素（またはnull）を返す必要があります。未定義、配列、またはその他の無効なオブジェクトを返した可能性があります

私は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;

手伝ってくれてありがとう！

reactjsreactive-programming
10
itgirl1234

問題は、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>
6
Shubham Khatri

問題はPokemonコンポーネントのreturnステートメントにあります。

return
   <div>
     ...
   </div>

次のように扱われます。

return ;    //Automatic semicolon insertion

<div>
   ...
</div>

そして、それはあなたが有効な要素を返していないことを意味します。

自動セミコロン挿入の詳細については、この回答を確認してください。

ソリューション：

Witherは、次のようにすべての要素を()でラップします。

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>);
  }
}
8
Mayank Shukla

このエラーは、「コンテンツ」に価値を与えている方法が原因です

値として「html」のような値を設定するときは、次の構文を使用する必要があります。

content = (<div/>);

試してみて、うまくいくかどうか教えてください！

幸運を！

0
Borja Navarro

ES6構文を使用している場合は、次のことを確認してください

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

ここでは、「（）」が重要であり、角かっこは返されたjsxであると述べています

あなたが単一の行を返す場合は、これを行うことができます

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