такое пустое оповещение с альтернативами jsx / реагировать

Question

Поэтому я подумал, что нашел отличный способ предупредить пользователей о том, что массив пуст и нечего отображать, но на самом деле моя техника не очень хорошо реализована и работает только при фокусе или перезагрузке страницы, я поставил функцию на 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 }

Пожалуйста, кто-то предложитлучшая альтернатива.

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

Надеюсь, это поможет:)