React Native : update useState() Value

Question

我正在尝试更新setStars值。即使条件为真，也不会更新。我不知道为什么

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);
}
}

Answer 1

设置Stars值(setStars(10))后，不要使用alert来打印更改。alert不会立即打印更改的值。而是在if条件之后尝试console.log(Stars)。您将看到更改。

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);

Answer 2

问题是setStars是一个异步函数，即当无法保证Stars的值已经改变时，下面的代码将继续执行。

要做你想做的事情，你可以保持你在变量中设置的值:

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

或者(更好)使用useEffect钩子来查看setStars完成后的值:

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

usereffect钩子更加健壮，因为它会在Stars值改变时运行