When counter is >= data Array length setLoading should trigger. But counter is not being incrementing until I refresh app by pressing CTRL S then counter increment itself by 1 every time app refreshes.
const [loopCount, setLoopCount] = useState('1');
const [isLoading, setLoading] = useState(true);
useEffect(() => {
const getPackages = async () => {
try {
const offerings = await Purchases.getOfferings();
if (offerings.current !== null) {
var counter = 0;
data.forEach((category, index) => { //data is array with length of 6
if(category.entitlement_id){
AsyncStorage.getItem(category.entitlement_id).then((value) => {
console.log("Loop COUNT before is : " loopCount);
setLoopCount(loopCount 1); //This should increment on every iteration of forEach
console.log("Loop COUNT after is : " loopCount);
});
}else{
console.log("ELSE COUNTER" counter);
setLoopCount(loopCount 1);
}
if(loopCount >= data.length){ //if counter is >= data length do something
setLoading(false);
}
})
}else{
console.log("No offerings found");
}
} catch (e) {
console.log("Error => " e);
}
}
getPackages();
}, [])
CodePudding user response:
Updating state is an asynchronous operation, so getting loopCount
in for loop will get the initial loopCount
value instead of updated value. If you don't need UI update for updating loopCount
, you can use useRef
instead of useState
:
const loopCount = useRef(1);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
const getPackages = async () => {
try {
const offerings = await Purchases.getOfferings();
if (offerings.current !== null) {
var counter = 0;
data.forEach((category, index) => { //data is array with length of 6
if(category.entitlement_id){
AsyncStorage.getItem(category.entitlement_id).then((value) => {
console.log("Loop COUNT before is : " loopCount.current);
loopCount.current = loopCount.current 1; //This should increment on every iteration of forEach
console.log("Loop COUNT after is : " loopCount.current);
});
}else{
console.log("ELSE COUNTER" counter);
loopCount.current = loopCount.current 1;
}
if(loopCount.current >= data.length){ //if counter is >= data length do something
setLoading(false);
}
})
}else{
console.log("No offerings found");
}
} catch (e) {
console.log("Error => " e);
}
}
getPackages();
}, [])
CodePudding user response:
I doubt that the counter is really necessary here, I would suggest a solution with synchronious AsyncStorage.getItem
const [isLoading, setLoading] = useState(true);
useEffect(() => {
const getPackages = async () => {
try {
const offerings = await Purchases.getOfferings();
if (offerings.current !== null) {
var counter = 0;
await Promise.all(
data.map(async (category, index) => {
if (category.entitlement_id) {
await AsyncStorage.getItem(category.entitlement_id).then(value => {
});
} else {
console.log('ELSE COUNTER' counter);
}
})
);
setLoading(false);
} else {
console.log('No offerings found');
}
} catch (e) {
console.log('Error => ' e);
}
};
getPackages();
}, []);
CodePudding user response:
const [loopCount, setLoopCount] = useState('1');
useState('1') might be causing bug. it should be useState(1). you care calling this setLoopCount(loopCount 1)