Question

尝试使用内联if-else呈现Footer组件，以避免传递来自Firebase的未定义数据，从而以某种方式传递那些prop，并且Footer组件大喊未定义的prop。

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中，空对象的值为true

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

您不应该检查类似(this.state.hours)?的状态，当this.state.hours为0或''时将为false，但当this.state.hours时将为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 }
})

Answer 4

您可以更改渲染代码以检查位置对象是否具有键。像这样

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

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

4 个答案: