为什么即使我有条件地渲染组件，道具也未定义？

Question

尝试使用内联 if-else 渲染页脚组件以避免从 Firebase 传递未定义的数据，但它以某种方式传递了这些道具，而页脚组件对未定义的道具大喊大叫。

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 初始化为空对象 {}

空对象在 Javascript

中的计算结果为真

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

也许你应该将它初始化为 false

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

Answer 2

你的代码现在的样子，this.state.hours 永远不会是错误的。一个空对象是真实的。有关详细信息，请参阅 All falsey values in 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)? 当 this.state.hours 是 0 或 '' 时它会是 false 但当 [=12] 时它会是 true =] 是 {}.
尝试使用 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 }
})

为什么即使我有条件地渲染组件，道具也未定义？

Why props are undefined even while I render component conditionally?

javascript

undefined

firebase

reactjs