Question

我已经通过反应路由器将道具传递给了上述组件：

<BrowserRouter>
      <Switch>
          <Route path="/product-page" exact render={(props) => ( <ShopPages {...props} response={this.state.response}/>)}/>
      </Switch>
    </BrowserRouter>

我想像这样使用componentDidMount()中的道具：

componentDidMount() {
 console.log(this.props.response)
}

道具this.props.response在我可以控制台的组件中可用。将其记录在render（）中。我不确定在上述情况下控制台为何将数组显示为空。我尝试查看数据是否可用，然后以console.log( 'show', this.props.response && this.props.response)或通过添加async来显示数据：

async componentDidMount() {
const data = await this.props.response
}

但这也无济于事。有帮助吗？

Answer 1

我只是假设this.state.response不是Promise，但实际上是数据，因为您说的是一个空数组，因此async / await不会做任何事情。

ComponentDidMount（）仅在组件挂载时被触发一次，而不是根据挂载后可能发生的道具更新执行动作的地方。因此，我建议您兑现承诺，如果这不是一种选择，请执行类似的操作

componentDidUpdate(prevProps, prevState) {
    if (!prevProps.response.length && this.props.response.length) {
      //Your code
    }
  }

通过React路由器传递道具在componentDidMount中不可用？

1 个答案: