Question

我通过this.props.history.push将用户从component1移到component2。当我进入component2时，看起来好像仍然安装了component1。

我尝试了所有与取消订阅商店类似的问题。

import React, {Component} from 'react';
import axios from 'axios';
import {Animate} from 'react-animate-mount';
import {translateTexts} from "../App";
import store from "../../store";


class Component1 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            texts: {
                computing: null
           },
        };
    }

    componentWillUnmount() {
        return store.subscribe(() => {
            console.log('unmount');
        })
    }

    componentWillMount() {
        store.subscribe(() => {
           translateTexts(this.state.texts),store.getState().translate.userLanguage).then((res) => {{
                this.setState({texts: res.data});
            });
        });


        axios.post(`/api/`)
            .then((res) => {
                this.setState({show: false});
                    setTimeout(() => {
                        window.location.href = '/storage/'+res.data.id
                    }, 600);        
             })
            .catch((err) => {
                this.props.history.push({
                    pathname: '/error/'+err.response.status,
                    state: { code: err.response.status }});
               });
            });


    render() {
         return (
             <div className="box">
                   Something
             </div>
        );
    }
}

export default Component1;

import React, { Component } from 'react';
import store from "../../store";
import {translateTexts} from "../App";

class Component2 extends Component {

     constructor(props) {
        super(props);
        this.state = {
        code : null,
        texts: {
            msg: null
           }
       };
    }

    componentWillMount() {
        this.setState( {
            code: this.props.location.state.code,
        });

        store.subscribe(() => {
           translateTexts(this.state.texts),store.getState().translate.userLanguage).then((res) => {{
                this.setState({texts: res.data});
            });
        });
    }

     render() {
        return (
            <div>
                Code: {this.state.code}
                <br></br>
                Message: <strong>{this.state.texts.msg}</strong>
             </div>
         );
    }
}

export default Component2;

在componentWillUnmount之后，我将停止订阅组件中的store个事件，因为现在store更新时，我在控制台中看到日志unmount，因此{{1} }以某种方式安装。感谢您的任何建议。

Answer 1

商店订阅应返回 unsubscribe 函数，您可以在 componentWillUnmount 处调用该函数以成功从商店中取消订阅。

您可以直接在 componentWillMount 中定义并存储为 state ：

this.setState({
  unsubscribe: store.subscribe(() => {
       translateTexts(this.state.texts),store.getState().translate.userLanguage).then((res) => {{
            this.setState({texts: res.data});
        });
  });
});

，然后在 componentWillUnmount

上调用unsubscribe

componentWillUnmount() {
  this.state.unsubscribe()
}

Redux文档：https://redux.js.org/api/store#subscribe

Answer 2

如果您同时使用React和Redux，则实际上不应该直接在组件中与商店进行交互。相反，您应该使用official React-Redux library，它可以为您处理所有订阅和存储更新过程。有关更多详细信息，请参见Why Use React Redux?上的文档页面。

如何停止订阅商店更新？

2 个答案: