Question

所以我当时想我发现了一种很好的方法来警告用户该数组为空并且没有任何显示，但是实际上我的技术实现得不好，并且只能在焦点或页面重新加载时使用，我将该函数放在{{1} }

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

请有人提出更好的选择。

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

希望它会有所帮助：）

这样的空警报与jsx /反应替代品

1 个答案: