Question

很抱歉，如果这在文档中的某处显而易见，但我试图等到我的状态在父组件上设置，然后再渲染子组件：

复述：

n x m

我的渲染在请求完成之前命中，因此我无法将新状态传递给子组件的构造函数。我该怎么做呢？希望这对某人来说是微不足道的果实。

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

注意：

您无法在JSX中使用if，因此需要使用&&来保持语法紧凑。一种常见的模式。
您可以拥有this.state.isReady布尔值，而不是要求存在特定值。另一种常见模式。
如果ChildComponent是您要呈现的唯一元素，则可能不需要<div />包装器，但您通常会出于某种原因或其他原因。

Answer 2

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

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

然后，反应将在第一次呈现空字符串，在更改状态后，它将再次呈现填充的myVal值。

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

Answer 3

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

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

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

3 个答案: