допустимый элемент React (или ноль) должен быть возвращен

Question

Возникли проблемы при переборе списка и печати элементов в 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 (или ноль). Возможно, вы вернули undefined, массив или другой недопустимый объект.

Я почти уверен, что есть какая-то проблема с возвратами в функции рендеринга Не знаю, в чем проблема.

EDIT:

Answer 1

В вашем коде, внутри метода 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;
        }
     }
}

Answer 2

Вы должны заключить свой код в render () с помощью div:

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

console.log возвращает undefined, что не является "действительным элементом React (или нулевым)".

Заменить эти звонки на

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

Вы также не возвращаетесь во всех возможных ситуациях. Я бы также добавил return null; в конце, чтобы быть в безопасности.