reactjs – 必须返回有效的React元素(或null).您可能已返回undef

发布时间：2020-12-15 20:15:49 所属栏目：百科来源：网络整理

导读：我是ReactJS的新手,我遇到了问题.我无法解决它.似乎一切都很好,但仍然控制台让我： A valid React element (or null) must be returned. You may have returned undefined,an array or some other invalid object. 这是我的代码： import React from 'react'

我是ReactJS的新手,我遇到了问题.我无法解决它.似乎一切都很好,但仍然控制台让我：

A valid React element (or null) must be returned. You may have
returned undefined,an array or some other invalid object.

这是我的代码：

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;

感谢帮助！

解决方法

问题是你在渲染中有多个语句,因此你需要将它包围在()中看下面的代码片段.此外(必须在返回的同一行,否则它将被视为仅返回,基本上没有返回任何东西.

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!