reactjs - React Native : make API request, 设置状态，然后渲染？

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}
      />
    )
  }
}

我的渲染在请求完成之前命中，因此我无法将新的 State 传递给子组件的构造函数。我怎样才能正确地做到这一点？希望这对某些人来说是容易实现的目标。

Answer 1

首先，我建议将您的异步请求移至 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>
  )
}

注意:

• 您不能使用if在 JSX 内部，所以这种不太合规的使用 &&需要保持语法紧凑。常见的模式。

• 您可以拥有this.state.isReady bool 值而不是询问是否存在特定值。另一种常见模式。

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