javascript - React-native componentDidMount 从服务器获取

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

My issue is some functions are mounting twice whenever I change the route and revisit this route again I would show you console.log here

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

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

在上面的日志中，您可以看到第二次行号 197 221 210 执行了两次并出现错误我无法解决

我正在为 route 使用 React navigator

我也检查了发布版本，但它有与在一个 Github 问题中告诉的相同错误，但现在无法找到。

Answer 1

每次运行此行时

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

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

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

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

编辑:

代码示例 -

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