我是个新手,我正在开发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,以避免我的网站尝试使用旧提取的数据。
有办法吗? 我希望我提供了足够的信息,否则请告诉我。
答案 0 :(得分:1)
如果要在离开组件时调用该函数,则可以使用componentWillUnmount
函数。阅读更多关于React Lifecycle方法的信息。