如何使用三元运算符的3种条件从github api中获取数据？

Question

I am trying to use ternary operators for 3 condition. I am getting data from github api using axios. First one isFetching it is used for fetching the data in which I will show a loading screen second one is used when the data is shown and the third one will be used to show an error message. I don't know how to put this in ternary operator or is there any other mistake I am doing ?

Body.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import 'bootstrap/dist/css/bootstrap.css';

class Body extends Component{

render(){
    const { user, isFetching, error } =this.props;
    return(
        <div>
            {user.map((item,key) => {
                return (
                    <div key={key} className="card" >
                        <img className="card-img-top" src={item.data.avatar_url} alt="Card image cap"/>
                        <div className="card-body">
                            <h5 className="card-title">{item.data.name}</h5>
                            <p className="card-text">{item.data.bio}</p>
                        </div>
                        <ul className="list-group list-group-flush">
                            <li className="list-group-item">{item.data.email}</li>
                            <li className="list-group-item">{item.data.location}</li>
                            <li className="list-group-item">{item.data.followers}</li>
                        </ul>
                        <div className="card-body">
                            <a href={item.url} className="card-link">Profile</a>
                        </div>
                    </div>
                )
            })}

        </div>
);
}
}
function mapStateToProps(state) {
    return{
        user: state.user.user,
        isFetching: state.user.isFetching,
        error: state.user.error
    }
}



export default connect(mapStateToProps) (Body);

Answer 1

A nested ternary operator is not very readable. However it would look like

{isFetching? <Loading /> : error ?  <Error />: <Data />}

However you should make use of if statements to make it more readable

render(){
    const { user, isFetching, error } =this.props;
    if (isFetching) {
       return <div> Loading ... </div>
    }
    if (error) {
       return <div> Error </div>
    }
    return(
        <div>
            {user.map((item,key) => {
                return (
                    <div key={key} className="card" >
                        <img className="card-img-top" src={item.data.avatar_url} alt="Card image cap"/>
                        <div className="card-body">
                            <h5 className="card-title">{item.data.name}</h5>
                            <p className="card-text">{item.data.bio}</p>
                        </div>
                        <ul className="list-group list-group-flush">
                            <li className="list-group-item">{item.data.email}</li>
                            <li className="list-group-item">{item.data.location}</li>
                            <li className="list-group-item">{item.data.followers}</li>
                        </ul>
                        <div className="card-body">
                            <a href={item.url} className="card-link">Profile</a>
                        </div>
                    </div>
                )
            })}

        </div>
    );
  }
}

Answer 2

To ease complex conditioning in the JSX you can always use : https://www.npmjs.com/package/jsx-control-statements . With that you can simply write your code like this:

class Body extends Component {

  render() {
    const { user, isFetching, error } = this.props;
    return (
      <div>
        <For each="item" index="idx" of={this.props.items}>
          <Choose>
            <When condition={isFetching}>
              <div key={idx} className="card" >Loading</div>
            </When>
            <When condition={!isFetching}>
              <div key={idx} className="card" >Some data2</div>
            </When>
            <Otherwise>
              <div key={idx} className="card" >Some error</div>
            </Otherwise>
          </Choose>

        </For>
      </div>
    )
  }
}