React Native：发出 API 请求，设置状态，然后渲染？

Question

对不起，如果这在文档中的某处很明显，但我试图等到我的状态设置在父组件上，然后再渲染子组件：

释义：

class Parent extends Component {

  componentWillMount() {
    firestack.database.ref()
      .then((snapshot) => {
        this.setState({myVal: snapshot.val})
      })
  }

  render() {
    // Renders before request finishes setting state,
    // Child component receives an undefined val
    return (
      <ChildComponent
        myVal={this.state.myVal}
      />
    )
  }
}

我的渲染在请求完成之前命中，所以我无法将新状态传递给子组件的构造函数。我怎样才能正确地做到这一点？ 希望这对某人来说是唾手可得的成果。

Answer 1

如果ChildComponent 需要myVal 参数，您只需在父级中执行此操作：

return (
  {this.state.myVal !== undefined &&
    <ChildComponent
      myVal={this.state.myVal}
    />
  }
)

然后 react 会在第一次渲染空字符串，在改变状态后它会再次渲染填充 myVal 值。

另外，正如另一个答案中提到的那样，使用componentDidMount 会更好。

Answer 2

首先，我建议将您的异步请求移至componentDidMount。不是强制性的，但它是生命周期中更好的一点。无论如何，您的组件都需要能够处理myVal == undefined。

那么，在myVal 可用之前不要渲染子组件：

render() {
  return (
    <div>
      { this.state.myVal && <ChildComponent myVal={this.state.myVal} /> }
    </div>
  )
}

或者，也可以渲染一个微调器：

render() {
  return (
    <div>
      { this.state.myVal 
        ? <ChildComponent myVal={this.state.myVal} />
        : <Spinner />
      }
    </div>
  )
}

注意：

• 你不能在 JSX 中使用if，所以为了保持语法紧凑，&& 的这种不太合理的使用是必需的。一种常见的模式。

• 您可以使用 this.state.isReady 布尔值，而不是询问是否存在特定值。另一种常见的模式。

• 如果 ChildComponent 是您要渲染的唯一元素，您可能不需要 <div /> 包装器，但您通常出于某种原因这样做。

Answer 3

建议您在 componentDidMount 内进行 API 调用，而不是在 componentWillMount 内。 https://facebook.github.io/react/docs/react-component.html#componentdidmount

在此方法中设置状态将触发重新渲染。