javascript - 如何使用三元运算符满足3个条件从github api获取数据？

Question

我正在尝试将三元运算符用于 3 个条件。我正在使用 axios 从 github api 获取数据。第一个 isFetching 用于获取数据，其中我将显示加载屏幕，第二个用于显示数据时使用，第三个用于显示错误消息。我不知道如何将其放入三元运算符中，还是我犯了任何其他错误？

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

嵌套三元运算符的可读性不太好。然而它看起来像

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

但是您应该使用 if 语句来使其更具可读性

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