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

现在我将执行取消产品调用，日志将是

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

现在我将执行取消产品调用，日志将是

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

使用 React navigator

我也检查了发行版，但它有一个 Github 问题中提到的相同错误，但现在找不到。

Answer 1

每次你运行这一行

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

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

一般来说，我会建议您的 getProductDetails 会 return 一个 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 从服务器获取

react-native componentDidMount to fetch from server

javascript

react-native

react-native-android