必须返回有效的 React 元素（或 null）。您可能返回了未定义、数组或其他一些无效对象

IT技术 reactjs reactive-programming
2021-04-04 07:23:15

我是 ReactJS 的新手，我遇到了问题。我解决不了 似乎一切都很好，但控制台仍然让我：

必须返回有效的 React 元素（或 null）。您可能返回了 undefined、数组或其他一些无效对象。

这是我的代码： 

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;

精灵宝可梦.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;

感谢帮助！

4个回答

问题出在 Pokemon 组件中的 return 语句中，因为当您使用时：

return
   <div>
     ...
   </div>

它将被视为：

return ;    //Automatic semicolon insertion

<div>
   ...
</div>

这意味着您没有返回有效元素。

检查此答案以了解有关自动分号插入的更多详细信息。

解决方案：

()像这样将所有元素包装起来：

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

问题是您有多个语句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>

这个错误是因为你赋予“内容”value的方式

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

content = (<div/>);

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

祝你好运！

我刚刚尝试为所有 if 和 else 语句添加括号，但仍然存在相同的问题。
2021-05-24 07:23:15
为什么不是真的？我的意思是，我在一个反应​​项目中，这就是我在返回函数中打印之前封装 HTML 代码的方式......如果你不能这样做： const data = (<div>INFORMATION</div>); return = (<div>{data}</div>); 告诉我你会怎么做？
2021-05-28 07:23:15
需要在返回括号中，而不是在设置单行变量时。
2021-06-05 07:23:15
对于 JSX，情况并非如此。
2021-06-17 07:23:15

当您使用 ES6 语法时，请确保您执行以下操作

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

这里的“ () ”很重要，它表示括号内是返回的 jsx

如果您有单行返回，那么您可以执行此操作

const App = ()=> <h1>Hello</h1>
其它你可能感兴趣的问题
上一篇我应该在哪里声明在 useEffect() 钩子中调用的函数？ 下一篇选择在react材料 ui 中单击图标组件（下拉箭头）不起作用