必须返回有效的 React 元素(或 null).您可能返回了未定义、数组或其他无效对象 [英] A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

查看：45
本文介绍了必须返回有效的 React 元素(或 null).您可能返回了未定义、数组或其他无效对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚接触 ReactJS，遇到了问题.我解决不了似乎一切都很好，但仍然控制台让我:

<块引用>

必须返回有效的 React 元素(或 null).你可能有返回未定义、数组或其他无效对象.

这是我的代码:

从'react'导入React；从 'react-dom' 导入 ReactDOM；从同构获取"中导入获取；从'./Pokemon'导入口袋妖怪；class PokemonList 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {物种: []，获取:假，加载:假，};}componentWillMount(){this.setState({加载:真实});fetch('http://pokeapi.co/api/v2/pokemon?limit=151').then(res => res.json()).then(res =>{this.setState({物种:res.results，加载:真实，获取:真实});});}使成为() {const {fetched, loading, species} = this.state;让内容；//这似乎是问题所在如果(获取){内容 =<div className="pokemon--species--list">{species.map((pokemon,index) => <Pokemon key={pokemon.name} id={index+1} pokemon={pokemon}/>)}

;}否则如果(加载&& ！获取){内容 = <p>正在加载...</p>;}别的{内容 = <div/>;}返回 (<div>{内容}

);}}导出默认 PokemonList；

Pokemon.js

从'react'导入React；从 'react-dom' 导入 ReactDOM；class Pokemon 扩展 React.Component {使成为() {const {pokemon, id} = this.props;返回<div className="pokemon--spacies"><div className="pokemon--spacies--container"><div className="pokemon--spacies--sprite"><img src={`/public/sprites/${id}.png`}/>

<div className="pokemon--spacies--name">{pokemon.name }</div>

;}}导出默认口袋妖怪；

感谢您的帮助！

解决方案

问题是您在 render 中有多个语句，因此您需要将其括在 () 中> 请参阅以下代码段.此外，( 必须与 return 位于同一行，否则它将被视为 return ，它基本上不返回任何内容.

class Pokemon extends React.Component {使成为() {var content = <div></div>返回 (<div className="pokemon--spacies"><div className="pokemon--spacies--container"><div className="pokemon--spacies--sprite">{内容}

<div className="pokemon--spacies--name">你好

)}}ReactDOM.render(, 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>

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!

解决方案

The problem is that you have multiple statements in render and hence you need to surround that within () See the below snippet. Also the ( must be on the same line as return otherwise it will be treated a return only which is basically returning nothing. 

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>

这篇关于必须返回有效的 React 元素(或 null).您可能返回了未定义、数组或其他无效对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆