reactjs中如何防止在不同组件中调用相同的api

Question

我正在处理大型 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);`

Answer 1

一旦您的应用程序被挂载，您就可以实际调用 API。通常这是通过componentDidMount 完成的，或者如果您使用钩子，您可以将其添加到useEffect 中。

你可以只传递道具。

更好的解决方案是在您的项目中使用redux，其中您的应用程序的整个状态都在您可以使用react-redux 连接的商店中。