如何在离开组件之前立即调用函数?

时间:2018-10-09 07:56:35

标签: reactjs react-redux

我是个新手,我正在开发REST-API的前端。

我的REST-API前端组织在5个站点(组件)中,这些站点使用react-router-dom进行路由。

每次进入站点时,ComponentDidLoad都会调度一个动作,该动作又会在我的reducer中调用API。

export function getData(pURL, ...pParams){

    return (dispatch) => {
        axios.get(pURL, {pParams})
        .then(result => {
            dispatch(getDataSuccess(result.data))
        })
        .catch(error => {
            dispatch(getDataFailure(error))
        })
    }
}

我的一个主要站点如下

class Overview extends Component {

    componentDidMount(){
        this.props.getData(MyURLHere);
    }

    render(){
        return(
            <div>

                {this.props.hasError ? "Error while pulling data from server " : ""}

                {/*  isLoading comes from Store. true = API-Call in Progress  */}
                {this.props.isLoading ? "Loading Data from server" : this.buildTable()}
            </div>
        )
    }
}

let mapStateToProps = state => {
hasError: state.api.hasError,
isLoading: state.api.isLoading,
companies: state.api.fetched 
}

let mapDispatchToProps = {
//getData()
}

export default connect(mapStateToProps, mapDispatchToProps)(Overview); 

state.api.fetched是我的存储变量,我存储来自每个API调用的数据。

this.buildTable()只是映射数据并创建一个简单的HTML表

我的问题是我在isLoading中将存储状态变量true设置为initialState

但是,当我移至另一个站点然后又回到该站点时,它会自动从state.api.fetched获取数据,并尝试使用它来this.buildTable(),因为isLoading不是{{1} }。最终以“不是函数”错误结束,因为其中仍然有旧的,从另一个站点获取的数据。

我的解决方案是在离开将我的商店重置为true的组件(站点)时始终调用一个函数

initialState

或直接将const initialStateAPI = { isLoading: true } 设置为true,以避免我的网站尝试使用旧提取的数据。

有办法吗? 我希望我提供了足够的信息,否则请告诉我。

1 个答案:

答案 0 :(得分:1)

如果要在离开组件时调用该函数,则可以使用componentWillUnmount函数。阅读更多关于React Lifecycle方法的信息。