Question

我是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;

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;

感谢您的帮助！

Answer 1

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

时

express

它将被视为：

var execFile = require('child_process').execFile;
execFile('dodgycommand', options, function(error, stdout, stderr) {
    if (req.timedout) {
        console.log('timeout detected whilst running dodgycommand, so aborting...');
        return;
    }
    if (error) {
        console.log('error running dodgycommand:', error);
        res.sendStatus(400);
        return;
    }

    // ... it's safe to continue ...

}

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

查看此答案，详细了解 {{3}} 。

<强>解决方案：

按return <div> ... </div>这样包裹所有元素：

return ;    //Automatic semicolon insertion

<div>
   ...
</div>

或将div放在同一行中，如下所示：

()

使用此部分它将起作用：

return (
 ....
)

Answer 2

问题是您在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>

Answer 3

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

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

content = (<div/>);

尝试一下，让我知道它是否有效！

祝你好运！

Answer 4

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

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

这里＆＃34; （）＆＃34;很重要，它说括号是jsx返回

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

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

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

4 个答案: