Reactjs 如何防止在react js的不同组件中调用相同的api

我正在处理一个大型的reactjs应用程序，在这个应用程序中有很多组件，还有很多api服务。 我的问题是如何防止在不同的组件中调用相同的api。 实际上我只想调用一次api，我将在整个应用程序中使用该api响应，这样我们就可以防止在不同的组件中调用相同的api。 所以请给我任何解决办法。 检查以下演示代码：

enter code here

`FirstComponent:
 ——————————————
 Class FirstComponent extends Component {
 constructor(props){
 this.setState={}
}
componentDidMount() {
this.props.dispatch(getById(1)); //here first time I am calling api
}
render(){
return(
———HTML Code HERE———
)
}
const mapStateToProps = state => {
  return {
    registrationData: state.RegistrationDemand.registrationData 
    // here I am getting response through redux reducer store
    };
};
export default compose(
  translate,
  withRouter,
  connect(mapStateToProps)
)(FirstComponent);

SecondComponent:
——————————————
Class SecondComponent extends Component {
constructor(props){
this.setState={}
}
componentDidMount() {
this.props.dispatch(getById(1));   //here I need to prevent this second time api calling
}
render(){
return(
———HTML Code HERE———
)
}
const mapStateToProps = state => {
  return {
    registrationData: state.RegistrationDemand.registrationData 
//without calling second component,If I use this one first time when I redirect to this page data is coming hereabout when I refresh second time it is getting null.
    };
};
export default compose(
  translate,
  withRouter,
  connect(mapStateToProps)
)(SecondComponent);`

---

安装应用程序后，实际上可以调用API。通常，这是通过

componentDidMount

完成的，或者如果您正在使用挂钩，您可以将其添加到

useffect

中

你可以传递道具

---

一个更好的解决方案是在项目中使用

redux

，其中应用程序的整个状态都在一个存储中，您可以使用

react redux进行连接
一旦安装了应用程序，就可以实际调用API。通常，这是通过
componentDidMount
完成的，或者如果您正在使用挂钩，您可以将其添加到
useffect
中

你可以传递道具

一个更好的解决方案是对您的项目使用
redux
，其中应用程序的整个状态都在一个存储中，您可以使用
react redux
进行连接。嗨，Rem，我已经在我的项目中使用react redux了，也在使用存储，但这里我遇到的问题是：让我们解释一下，第一个组件api服务调用服务响应，也存储在存储中我使用mapStateToProps函数使用存储数据，这对我来说是完全正确的，但是，当我第一次重定向到第二个组件时，前一个redux存储返回api响应，但当第二次刷新页面时，它将变为null。我可以看一点您的代码吗，以便我可以正确地查看它吗？@AshokSudagani您的意思是什么
，但是当第二次刷新页面时，它将变为null。
？如果你刷新你的浏览器标签，这意味着你的js代码再次初始化，并且你存储在内存中的数据被清除。嗨，伙计们，请查看上面的演示代码，我可能做了什么mistakes@AshokSudagani如何安装这两个组件？如果在显示第二个组件之前卸载第一个组件，并刷新选项卡，则确保它会清理内存。我想你需要的是一个容器来包装这两个组件。如果卸载这两个容器中的任何一个都无所谓，只要您保持容器已安装。嗨，Rem，我已经在我的项目中使用react-redux，也在使用store，但这里我遇到的问题是：让我们解释一下，第一个组件api服务调用服务响应，也存储在存储中我使用mapStateToProps函数使用存储数据，这对我来说是完全正确的，但是，当我第一次重定向到第二个组件时，前一个redux存储返回api响应，但当第二次刷新页面时，它将变为null。我可以看一点您的代码吗，以便我可以正确地查看它吗？@AshokSudagani您的意思是什么
，但是当第二次刷新页面时，它将变为null。
？如果你刷新你的浏览器标签，这意味着你的js代码再次初始化，并且你存储在内存中的数据被清除。嗨，伙计们，请查看上面的演示代码，我可能做了什么mistakes@AshokSudagani如何安装这两个组件？如果在显示第二个组件之前卸载第一个组件，并刷新选项卡，则确保它会清理内存。我想你需要的是一个容器来包装这两个组件。如果您卸载了这两个容器中的任何一个，只要您保持容器的安装状态，这并不重要。