React Native：更新 useState() 值

Posted 2023-02-19

【中文标题】React Native：更新 useState() 值

【英文标题】：React Native : update useState() Value

【发布时间】：2021-11-15 04:59:38

【问题描述】：

我正在尝试更新 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);
  

【参考方案1】：

问题在于 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]);

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

【参考方案2】：

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

【讨论】：

在尝试了您的建议后没有成功的事件。最重要的是本地存储中的值不起作用

let temp=10 setStars(temp); let PartOne = JSON.stringify(temp); AsyncStorage.setItem('Part1', PartOne); setstate 是一个异步函数。不会立即反映价值变化