在条件呈现ReactJS中读取if-else逻辑的正确方式

Question

所以我刚刚开始学习reactJS，在编写的条件呈现中阅读if-else时有点困惑。这是我写的代码：

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(，应用程序一直显示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

因此，如果加载状态等于真；"静止加载"；，如果加载状态设置为false，则意味着ajax请求完成；加载"；。