在条件呈现ReactJS中读取if Proper逻辑的正确方法

Question

因此，我刚刚开始学习reactJS，在我编写的条件呈现中阅读一个if little时，我感到有点困惑。这就是我写的代码：

    this.setState({
      loading: true
    })
    axios('https://api.randomuser.me/?nat=USA&results=5').then(response => this.setState({
        users : response.data.results,
        loading : false
      }))
  }

  componentWillMount() {
    this.getUser()
  }

  render() {
    return (
      <div className="App">
          {!this.state.loading ?
          this.state.users.map(user =>
             <div>
               <h2>{`${user.name.first} ${user.name.last}`}</h2>
             </div>) : 'Loading'}
          {console.log(this.state.loading)}
      </div>
    );
  }

当程序仍在获取API数据时，将显示一个“加载”字符串，当程序已经获得API数据时，它将消失并显示数据。

我正在为render()中的角色做试错。首先，我把this.state.loading放在没有! (false)的地方，而这个应用程序只是一直显示加载，没有尽头。但是当我把! (假的)放在一起的时候，这个程序运行得很好。

因此，我对如何在这种情况下读取if else语句感到困惑，比如

如果this.state.loading条件为false (使用!)，则编写<h2>。否则显示“加载”字符串。

但是问题是，在获得API数据之前的this.state.loading条件是正确的，因为我在这里写过它：

    this.setState({
      loading: true
    })
    axios('https://api.randomuser.me/?nat=USA&results=5').then(response => this.setState({
        users : response.data.results,
        loading : false
      }))
  }

那么为什么装载是工作的呢？请告诉我如何读懂这个逻辑，谢谢。

Answer 1

this.state.loading == true ? console.log("still loading") : console.log("loaded"); 

您可以像这样检查值

试着改变

!this.state.loading 

至

this.state.loading == true

因此，如果加载状态等于true，它将显示“仍然加载”，如果加载状态设置为false，则意味着完成ajax请求并显示“加载”。