CODEWITHSUNDEEP
reactjsreact-nativereact-reduxexporeact-navigation
houcin olmostaf
houcin olmostaf

Reputation: 201

React Native : update useState() Value

I am trying to update setStars value. even when the condition is true is not updating. I do not know why

const [Stars, setStars] = useState(0);
if (passedData === 'part 1' && CurrentQuestion === QuestionData.length - 1) {
  if (score >= 1 && score <= 2) {
    setStars(10);
    alert(Stars);
    let PartOne = JSON.stringify(Stars);
    AsyncStorage.setItem('Part1', PartOne);
  }
  if (score >= 3 && score <= 4) {
    setStars(20);
    let PartOne = JSON.stringify(Stars);
    AsyncStorage.setItem('Part1', PartOne);
  }
}

Upvotes: 0

Views: 122

Answers (2)

mahi-man
mahi-man

Reputation: 4686

The issue is that setStars is an asynchronous function i.e. the code below it will keep executing when there is no guarantee that the value of Stars has changed yet.

To do what you want you can either hold the value you are setting it to in a variable:

const newStarValue = 10
setStars(newStarValue);

let PartOne = JSON.stringify(newStarValue);
AsyncStorage.setItem('Part1', PartOne);

Or (much better) use a useEffect hook to see the value after the setStars has completed:

useEffect(() => {
    let PartOne = JSON.stringify(Stars);
    AsyncStorage.setItem('Part1', PartOne);
}, [Stars]);

The uesEffect hook is much more robust as it will run whenever the Stars value is changed

Upvotes: 1

Prasanth
Prasanth

Reputation: 35

After setting Stars value (setStars(10)) don't use alert to print the change .Alert will not print the immediately changed values. Instead try console.log(Stars) after the if condition. You will see the changes.

const [Stars, setStars] = useState(0);
if (passedData === 'part 1' && CurrentQuestion === QuestionData.length - 1) {
  if (score >= 1 && score <= 2) {
    setStars(10);

    let PartOne = JSON.stringify(Stars);
    AsyncStorage.setItem('Part1', PartOne);
  }
  if (score >= 3 && score <= 4) {
    setStars(20);
    let PartOne = JSON.stringify(Stars);
    AsyncStorage.setItem('Part1', PartOne);
  }
}
console.log(Stars);

Upvotes: 1

Related Questions