There are two separate objects coming from the backend. I want to create two different objects using the same state. Then I want to call and print them. How can I do it?
PolicyContext
import React, { createContext, useMemo, useState } from 'react';
export const PolicyContext = createContext(undefined);
const PolicyContextProvider = (props) => {
const [policyData, setPolicyData] = useState({
activiesPolicy: '',
passivePolicy: ''
});
return (
<PolicyContext.Provider
value={useMemo(() => {
return ({
policyData,
setPolicyData,
});
}, [{ policyData, setPolicyData }])}
>
{props.children}
</PolicyContext.Provider >
);
};
export default PolicyContextProvider;
home.js
const activiesPolicyExampleReq = {
nationalId: '59104492600',
};
const passivePolicyExampleReq = {
nationalId: '59104492600',
};
const { policyData, setPolicyData } = useContext(PolicyContext);
useEffect(() => {
if (Object.keys(policyData.activiesPolicy).length === 0) {
PolicyService.getActivePolicies(activiesPolicyExampleReq).subscribe(
(response) => {
setPolicyData(response);
}
);
}
}, []);
useEffect(() => {
if (Object.keys(policyData.passivePolicy).length === 0) {
PolicyService.getPassivePolicies(passivePolicyExampleReq).subscribe(
(response) => {
setPolicyData(response);
}
);
}
}, []);
I think my queries are overwhelming each other.
It looks like you want to assign a response to a specific key in your state object. You could do that by spreading the existing state and modifying only part of it when you call setState hook.
Given you have a state like this:
const [policyData, setPolicyData] = useState({
activiesPolicy: '',
passivePolicy: ''
});
you probably want to do something like this:
useEffect(() => {
if (Object.keys(policyData.activiesPolicy).length === 0) {
PolicyService.getActivePolicies(activiesPolicyExampleReq).subscribe(
(response) => {
setPolicyData((prevState) => ({...prevState, activiesPolicy: response});
}
);
}
}, []);
useEffect(() => {
if (Object.keys(policyData.passivePolicy).length === 0) {
PolicyService.getPassivePolicies(passivePolicyExampleReq).subscribe(
(response) => {
setPolicyData((prevState) => ({...prevState, passivePolicy: response});
}
);
}
}, []);