Question

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

我的问题是每当我改变时，有些功能会挂载两次再次路由并再次访问此路线我会在这里向您显示console.log

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

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

现在我将进行cancelProduct调用，日志将是

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

这是第二次，即我将从这条路线返回并重新访问：

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

现在我将进行cancelProduct调用，日志将是

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

在上面的日志中你可以看到第二次line number 197 221 210 executed twice with the error我无法解决

我对route

使用了反应navigator

我也检查了发行版本，但是它在一个Github问题中被告知了同样的错误，但现在无法找到。

Answer 1

每次运行此行

Actions.cancelOrder.completed.listen(this.cancelOrderCompleted.bind(this));

listen方法每次运行时都会获得一个新的函数实例，因此如果此页面在应用程序的生命周期中安装了两次，cancelOrderCompleted将运行两次，其中一个可能在未安装的组件中这很糟糕。

通常我会建议您getProductDetails返回Promise。如果您不想这样做，请确保在卸载组件时删除侦听器。

请注意cancelOrderCompleted.bind(this)创建一个新的委托实例，在停止侦听器时无法重新创建。除非你把它保存在数据成员中。

编辑：

代码示例 -

constructor(props) {
    super(props);
    console.log("props");
    this.state={
        userId : "12345",
    }

    this.getProductDetailsBound = this.gotProductDetails.bind(this);
    this.cancelOrderCompletedBound = this.cancelOrderCompleted.bind(this);
}
componentDidMount() {
    console.log("componentDidMount")

    // Listen before you call getProductDetails, not after
    Actions.getProductDetails.completed.listen(this.getProductDetailsBound);        
    Actions.cancelOrder.completed.listen(this.cancelOrderCompletedBound);  

    Actions.getProductDetails({userId:"123456"});  
}

componentWillUnmount() {
    Actions.getProductDetails.completed.stopListening(this.getProductDetailsBound);        
    Actions.cancelOrder.completed.stopListening(this.cancelOrderCompletedBound);  
}

react-native componentDidMount从服务器

1 个答案: