反应原生返回 null 状态

【问题标题】：React native returning null for state反应原生返回 null 状态
【发布时间】：2017-10-25 21:58:09
【问题描述】：

我正在尝试设置项目的状态，然后将新状态用作传递给我的组件的道具，但它似乎没有及时设置状态

constructor (props) {
    super(props)
    this.cartFirebase = firebaseApp.database().ref('carts')
    this.cartFirebase.child(DeviceInfo.getUniqueID() + '/items').push({
      item: this.props.data.name,
      qty: 1
    }).then((snap) => {
      this.state = {
        cartKey: snap.key
      }
    })
  }

组件

<AddToCartRow item={this.props.data.sizes} option='size' key={this.state.cartKey}/>

【问题讨论】：

标签： react-native components states prop setstate

【解决方案1】：

这是因为在渲染AddToCartRow 时，this.state.cartKey 是null。

您正在从尚未实现的 Promise .then(..) 中设置 cartKey。

您的render() 实际上是在您的constructor 填充this.state.cartKey 之前调用的。

您可以编写以下逻辑以仅在 this.state.cartKey 评估为 true 并且我们知道 null 评估为 false 时渲染组件。

{this.state.cartKey && <AddToCartRow item={this.props.data.sizes} option='size' key={this.state.cartKey}/>}

【讨论】：