必须返回有效的React元素（或null）

Question

遍历列表并在React中打印元素时遇到了问题。

React代码为：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FetchData} from '../actions/data';

class DataList extends Component{
componentDidMount(){
    this.props.fetchData('http://somedomain/api/tweets');
}
renderList(){
    return this.props.data.map((i) => (
        <li  key={i.id} >
            {i.body}
        </li>
    ) )
}
render(){
if (this.props.hasErrored){
        return console.log('sorry there was an error');
    }else if (this.props.isLoading){
        return console.log('Loadings...');
    }else {
     if(this.props.data.length){
         return (
           <div>{this.renderList()}</div>
         );
     }
}
}
   }

DataList.propTypes = {
fetchData: PropTypes.func.isRequired,
data: PropTypes.array.isRequired,
hasErrored: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired
  };

   const mapStateToProps = (state) => {
   return {
    data: state.data,
    hasErrored: state.dataHasErrored,
    isLoading: state.dataIsLoading
   };
      };

   const mapDispatchToProps = (dispatch) => {
      return {
    fetchData: (url) => dispatch(FetchData(url))
    };
     };

     export default connect(mapStateToProps, mapDispatchToProps)(DataList);

我得到一个错误：

  

DataList.render（）：必须返回有效的React元素（或null）。您可能返回了undefined，数组或其他无效对象。

我很确定“不确定是什么问题”的渲染功能中存在返回问题。

编辑：

Answer 1

console.log返回undefined，它不是“有效的React元素（或null）”。

将这些通话替换为

console.log('...');
return null;

您也不会在所有可能的情况下返回。为了安全起见，我还会在末尾添加一个return null;。

Answer 2

您应该使用div将代码包装在render（）中：

render(){
  return(
    <div>
      {if (this.props.hasErrored){
        return console.log('sorry there was an error');
      }else if (this.props.isLoading){
        return console.log('Loadings...');
      }else {
        if(this.props.data.length){
          return (
            <div>{this.renderList()}</div>
          );
        }
      }
   </div>
  )
}

Answer 3

在您的代码中，在render方法内部，如果this.props.hasErrored结果为true，则组件将返回undefined并显示控制台消息，但响应组件应返回JSX或null，所以您可以这样做：

render() {
    if (this.props.hasErrored){
        console.log('sorry there was an error');
        return null;
    }else if (this.props.isLoading){
         console.log('Loadings...');
         return null;
    }else {
        if(this.props.data.length){
            return (
               <div>{this.renderList()}</div>
            );
        } else {
             return null;
        }
     }
}