Javascript 反应本机componentDidMount以从服务器获取

我的问题是，每当我更改 路线并再次访问此路线我将在此处向您显示console.log

这是我第一次来这条路线：

constructor(props) {
    super(props);
    console.log("props");
    this.state = {
        userId : "12345",
    };
}
componentDidMount() {
    console.log("componentDidMount");
    Actions.getProductDetails({userId:"123456"});
    Actions.getProductDetails.completed.listen(this.gotProductDetails.bind(this));
    Actions.cancelOrder.completed.listen(this.cancelOrderCompleted.bind(this));       
}
gotProductDetails(data) {
    console.log("gotProductDetails");  
}
goBack(data) {
    console.log("justgoback");
    this.props.back();
}
cancelProduct() {
    console.log("SDsadsadsad");
    Actions.cancelOrder({
        orderId:this.state.order.id,
        canelMsg:this.state.selectedReason,
        userId:this.state.userId
    });
}
cancelOrderCompleted(data) {
    console.log("cancelOrderCompleted");
    this.goBack();
}

SDsadsadsad
cancelOrder.js:221 cancelOrderCompleted
cancelOrder.js:210 justgoback

现在我将取消产品呼叫，并记录

props
cancelOrder.js:190 componentDidMount
cancelOrder.js:197 gotProductDetails

props
cancelOrder.js:190 componentDidMount
cancelOrder.js:197 gotProductDetails
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the cancelOrder component.
cancelOrder.js:197 gotProductDetails

这是第二次，即我将从此路线返回并再次访问：

constructor(props) {
    super(props);
    console.log("props");
    this.state = {
        userId : "12345",
    };
}
componentDidMount() {
    console.log("componentDidMount");
    Actions.getProductDetails({userId:"123456"});
    Actions.getProductDetails.completed.listen(this.gotProductDetails.bind(this));
    Actions.cancelOrder.completed.listen(this.cancelOrderCompleted.bind(this));       
}
gotProductDetails(data) {
    console.log("gotProductDetails");  
}
goBack(data) {
    console.log("justgoback");
    this.props.back();
}
cancelProduct() {
    console.log("SDsadsadsad");
    Actions.cancelOrder({
        orderId:this.state.order.id,
        canelMsg:this.state.selectedReason,
        userId:this.state.userId
    });
}
cancelOrderCompleted(data) {
    console.log("cancelOrderCompleted");
    this.goBack();
}

SDsadsadsad
cancelOrder.js:221 cancelOrderCompleted
cancelOrder.js:210 justgoback

现在我将取消产品呼叫，并记录

props
cancelOrder.js:190 componentDidMount
cancelOrder.js:197 gotProductDetails

props
cancelOrder.js:190 componentDidMount
cancelOrder.js:197 gotProductDetails
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the cancelOrder component.
cancelOrder.js:197 gotProductDetails

在上面的日志中，您可以看到第二次

行号197 221 210执行了两次，错误是我无法解决的

我正在使用react
navigator
for

我也检查了发布版本，但它有一个Github问题中告诉它的相同错误，但现在找不到。
每次运行此行时

Actions.cancelOrder.completed.listen（this.cancelOrderCompleted.bind（this））；

listen
方法每次运行时都会获得一个新的函数实例，因此，如果此页面在应用程序的生命周期中挂载两次，则
cancelOrderCompleted
将运行两次，其中一个可能在未挂载的组件中，这是错误的

一般来说，我建议您的
getProductDetails
将返回一个
Promise
。如果不想这样做，请确保在卸载组件时删除侦听器

请注意，
cancelOrderCompleted.bind（此）
会创建一个新的委托实例，在停止侦听器时无法重新创建该实例。除非您将其保存在数据成员中

编辑：

代码示例-

构造函数（道具）{
超级（道具）；
控制台日志（“道具”）；
这个州={
用户标识：“12345”，
}
this.getProductDetailsBound=this.getProductDetails.bind（this）；
this.CancelOrderCompletedBind=this.cancelOrderCompleted.bind（this）；
}
componentDidMount（）{
console.log（“componentDidMount”）
//在调用getProductDetails之前先听，不要在调用之后听
Actions.getProductDetails.completed.listen（this.getProductDetailsBound）；
Actions.cancelOrder.completed.listen（this.cancelOrderCompletedBound）；
Actions.getProductDetails（{userId:“123456”}）；
}
组件将卸载（）{
Actions.getProductDetails.completed.stopListening（this.getProductDetailsBond）；
Actions.cancelOrder.completed.stopListening（this.cancelOrderCompletedBound）；
}
您所说的是100%正确的cancelorder Completed在每次推送路线时都会创建新实例…但我关心的是，如果我需要从cancelorder获得的响应，我该如何获得和处理它…？我很难理解您所说的，因为我不太了解这些概念谢谢…真的很抱歉麻烦你了，我做了基于es6的实现，但它仍然是persistations.cancelOrder.completed.listen（（数据）=>{console.log（“cancelOrderCompleted”）ToastAndroid.show（data.msg，ToastAndroid.SHORT）；this.props.back（））；我确实喜欢es6中的这个，但仍然没有用。我尝试过这个也没有用