Почему реквизиты не определены, даже если я отрисовываю компонент условно?

Question

Попытка визуализации компонента Footer с использованием встроенного if-else, чтобы избежать передачи неопределенных данных из Firebase, каким-то образом он пропускает эти реквизиты, а компонент Footer кричит о неопределенных реквизитах.

this.state = {
  location: {},
  hours: {}
};

componentDidMount() {
  db.collection('location').get().then(snapshot => {
    snapshot.docs.forEach(doc => {
      this.setState({
        location: { ...doc.data()
        }
      })
    })
  });

  db.collection('hours').get().then(snapshot => {
    snapshot.docs.forEach(doc => {
      this.setState({
        hours: { ...doc.data()
        }
      })
    })
  });
}

render({
    {
      (this.state.hours) ? < Footer hours = {
        this.state.hours
      }
      location = {
        this.state.location
      }
      /> : null }
    })

Answer 1

Вы не должны проверять состояние, подобное этому (this.state.hours)?, оно будет ложным, когда this.state.hours равно 0 или '', но оно будет истинным, когда this.state.hours равно {}.
Попробуйте вместо этого использовать null с условием == null (чтобы проверить, null или undefined) или === null, чтобы проверить, null:

this.state={
  location: {},
  hours: null
};

 componentDidMount(){
 db.collection('location').get().then(snapshot => {
  snapshot.docs.forEach(doc => {
    this.setState({
      location: {...doc.data()}
    })
  })
});

db.collection('hours').get().then(snapshot => {
  snapshot.docs.forEach(doc => {
    this.setState({
      hours: {...doc.data()}
    })
  })
});
}

render({
  {(this.state.hours === null)? <Footer hours={this.state.hours} location={this.state.location}/> : null }
})

Answer 2

Как ваш код сейчас, this.state.hours никогда не будет ложным.Пустой объект правдив.См. Все значения Falsey в JavaScript для получения более подробной информации.

Вам либо нужен отдельный логический параметр в состоянии, сообщающий, был ли загружен hours, или вам нужно проверить что-то ещеконкретные в пределах this.state.hours.Другим вариантом будет инициализация this.state.hours до false.

Answer 3

Вы можете просто изменить код рендеринга, чтобы проверить, есть ли у объекта местоположения ключ.как это

render({
  {(Object.keys(this.state.hours).length <= 0)? <Footer hours={this.state.hours} location={this.state.location}/> : null }
})

Answer 4

Похоже, что вы инициализируете this.state.hours пустым объектом {}

Пустой объект будет иметь значение true в Javascript

if ({}) console.log("yes"); // Prints "yes"

Возможно, вам следует инициализировать его каквместо false

this.state={
  location: {},
  hours: false
};