Question

在下面的代码中，如果第一次调用失败并且第二次调用返回响应，则catch块内更新的cp值不可用作props。 cp的错误是第一次调用的响应。我需要第二次调用的响应才能在我的组件中使用

cp = getcp() // getcp returns promises
  cp.catch(ex => {
   if (ex) {
   cp = getcp()
   cp.catch(ex => {
    cp = {}
   })
  } else {
    cp = {}
  }
})

我将路由中的cp值发送为<Route path={ PAGE } component={ component } onEnter={ refresh } cp={ cp }/>，而我正在接收的组件中有cp值。thiss.props.route.cp

如果第一次通话成功，则正确传递cp。 chid组件中的this.props.route.cp返回cp值。这实际上只在第二次调用时失败

Answer 1

我猜自定义道具不再适用于react-router v4。您可能希望准备一个返回组件的函数，如下所示。

const PassComponent = (props) => {
    return (
    <ProductPage 
        cp={this.cp.bind(this)}
    />
    );
}

并以这种方式称呼

Route path={ PAGE } component={ PassComponent } onEnter={ refresh } />

参考：https://github.com/ReactTraining/react-router/issues/4105

Answer 2

你真的不应该将promises传递给子组件，因为当属性不可变时，React被设计为最佳。无论如何，当您更改cp的值时，它不会触发渲染，因此您的子组件不会更新。

相反，运行promise并通过调用父级中的setState来处理结果以修改组件状态。这将触发重新渲染，您可以从this.state传递子组件正确的值。

承诺 - 反应 - 道具 - 无法将承诺作为路径道具发送

2 个答案: