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

我尝试在3条件下使用三元运算符。我使用axios从github api获取数据。第一个是抓取，它用于抓取数据，我将在其中显示加载屏幕，第二个用于显示数据，第三个用于显示错误消息。我不知道如何把它放在三元运算符中，或者我还有其他错误吗

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
导入'bootstrap/dist/css/bootstrap.css'；
类主体扩展组件{
render（）{
const{user，isFetching，error}=this.props；
返回(
{user.map（（项，键）=>{
返回(
{item.data.name}
{item.data.bio}

{item.data.email}
{item.data.location}
{item.data.followers}

)
})}
);
}
}
函数MapStateTops（状态）{
返回{
用户：state.user.user，
isFetching:state.user.isFetching，
错误：state.user.error
}
}
导出默认连接（MapStateTops）（主体）；

要简化JSX中的复杂条件，您可以始终使用：。 这样，您就可以像这样编写代码：

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

类主体扩展组件{
render（）{
const{user，isFetching，error}=this.props；
返回(
加载
一些数据2
一些错误
)
}
}

嵌套的三元运算符可读性不强。不管它看起来怎么样

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

{isFetching？：错误？：}

但是，您应该使用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>
    );
  }
}

render（）{
const{user，isFetching，error}=this.props；
如果（正在获取）{
返回加载。。。
}
如果（错误）{
返回错误
}
返回(
{user.map（（项，键）=>{
返回(
{item.data.name}
{item.data.bio}

{item.data.email}
{item.data.location}
{item.data.followers}

)
})}
);
}
}

使用if/else if/else语句而不是双三元语句不是更易读吗？它起作用了，我对三元运算符更感兴趣。@SaifKhan我提供了一个关于如何使用三元运算符的示例。我希望有帮助