这种带有 jsx / react 替代品的空警报答案

【问题标题】：such empty alert with jsx / react alternatives这种带有 jsx / react 替代品的空警报
【发布时间】：2019-03-05 00:23:08
【问题描述】：

所以我想我找到了一个很好的方法来提醒用户数组是空的并且没有什么可以显示但实际上我的技术没有很好地实现并且只适用于焦点或页面重新加载，我把函数放在componentDidMount()

componentDidMount = () => {
this.setState({loading: true})
const { currentUser } = fire.auth();
    fire.database().ref(`/master/${currentUser.uid}/feed/sponsors/`)
    this.setState({
    sponsorsList:sponsorsList,
 }, () => {
    if (this.state.sponsorsList.length === 0)
        this.setState({loading: false, empty: true})
   });
 });
}

这可行，但是在我将某些内容推送到数组后，视图中仍然会出现这样的空文本，我该如何触发 .length 函数？

{this.state.empty ? <h6 class='mb-3'>Such empty!</h6> : null }

请有人提出更好的选择。

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6 jsx

【解决方案1】：

我认为你需要添加else逻辑：

if (this.state.sponsorsList.length === 0) {
    this.setState({ loading: false, empty: true })
} else { // Here are the additions
    this.setState({ loading: false, empty: false })
}

哦，那你可以写：

{this.state.empty && <h6 class="mb-3">Such empty!</h6>}

希望对你有帮助:)

【讨论】：