Reactjs 必须返回有效的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;

从“React”导入React；
从“react dom”导入react dom；
从“同构提取”导入提取；
从“./Pokemon”导入口袋妖怪；
类PokemonList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
种类：[]，
抓取：假，
加载：false，
};
}
组件willmount（）{
这是我的国家({
加载：正确
});
取（'http://pokeapi.co/api/v2/pokemon?limit=151）。然后（res=>res.json（）
。然后（res=>{
这是我的国家({
种类：res.results，
加载：对，
抓取：对
});
});
}
render（）{
const{fetched，loading，species}=this.state；
让内容；
//这似乎就是问题所在
如果（已获取）{
内容=
{species.map（（口袋妖怪，索引）=>）}
;
}
else if（加载和获取）{
内容=加载…
；
}
否则{
内容=；
}
返回(
{content}
);
}
}
导出默认口袋妖怪列表；

口袋妖怪

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;

从“React”导入React；
从“react dom”导入react dom；
类Pokemon扩展了React.Component{
render（）{
const{pokemon，id}=this.props；
返回
{pokemon.name}
;
}
}
导出默认口袋妖怪；

---

谢谢你的帮助

此错误是因为您赋予“内容”价值的方式

当您将某种“html”的值设置为值时，必须使用以下语法：

content = (<div/>);

content=（）；

试试看，让我知道它是否有效

---

祝你好运

问题出在口袋妖怪组件的return语句中，因为当您使用：

return
   <div>
     ...
   </div>

或者将div放在相同的返回行中，如下所示：

return (
 ....
)

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

类口袋妖怪扩展了React.Component{
render（）{
const{pokemon，id}=this.props；
返回(
{pokemon.name}
);
}
}

问题在于，在

渲染中有多个语句，因此需要将其包围在
（）
中，请参见下面的代码片段。而且
（
必须与
返回
在同一行，否则它将被视为
返回
，基本上不返回任何内容


类口袋妖怪扩展了React.Component{
render（）{
变量内容=
返回(
{content}
你好
)
}
}
ReactDOM.render（，document.getElementById（'app'）；
使用ES6语法时，请确保执行以下操作

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

const-App=（）=>(
亚当

亚历克斯

)

这里的“（）”很重要，它表示括号中的是返回的jsx

如果你有一个单行返回，那么你可以这样做

const App = ()=> <h1>Hello</h1>

const-App=（）=>您好
JSX不是这样。我刚刚尝试在所有if和else语句中添加括号，但仍然存在相同的问题。为什么不是这样？我的意思是，我在react项目中，这就是我在将HTML代码打印到return函数中之前如何封装代码的方法……如果不能做到这一点：const data=（信息）；return=（{data}）；请告诉我您将如何执行此操作？在返回括号中需要括号，而不是在设置单行变量时。
const App = ()=> <h1>Hello</h1>