React Native中useState的setStars更新状态不生效问题

问题根因 #

• React的useState返回的更新函数setStars是异步批量执行的，调用后不会立即修改当前渲染上下文中的Stars变量，所以你在setStars后直接读取Stars、弹出提示、存储到AsyncStorage拿到的都是本次渲染的旧值。
• 你直接将状态更新逻辑写在组件顶层，状态更新触发组件重渲染后会再次执行这段逻辑，可能出现死循环，也会导致状态更新不符合预期。

修复方案 #

1. 用useEffect包裹这段条件判断逻辑，把用到的外部变量全部加入依赖数组，保证只有依赖变化时才会执行校验逻辑
2. 存储数据、打印调试时直接使用你即将设置的新值，不要读取当前的旧Stars变量

修正后代码如下：

import { useState, useEffect } from 'react';
// 其他导入逻辑保持不变

const [Stars, setStars] = useState(0);

useEffect(() => {
  if (passedData === 'part 1' && CurrentQuestion === QuestionData.length - 1) {
    let newStars = 0;
    if (score >= 1 && score <= 2) {
      newStars = 10;
    } else if (score >= 3 && score <= 4) {
      newStars = 20;
    }
    // 仅当需要更新值时执行后续操作
    if (newStars > 0) {
      setStars(newStars);
      alert(newStars);
      let PartOne = JSON.stringify(newStars);
      AsyncStorage.setItem('Part1', PartOne);
    }
  }
}, [passedData, CurrentQuestion, QuestionData.length, score])

如果有其他逻辑需要依赖更新后的Stars执行，可以额外监听Stars的变化：

useEffect(() => {
  // 此处的Stars为更新后的最新值
  console.log('Stars更新完成，当前值：', Stars)
}, [Stars])

内容的提问来源于stack exchange，提问作者houcin olmostaf