React Native中状态数组更新异常问题求助

问题核心 #

你直接修改了状态数组的原引用（用push/splice操作chosenExerciseArray），React依赖状态引用的变化触发重新渲染，这种原地修改的方式无法被React检测到，导致状态更新失效；另外你未调用setChosenExercises完成状态更新，也是关键问题。

修复方案 #

永远不要直接修改React状态，而是通过创建新数组副本的方式更新状态：

• 添加元素：用扩展运算符生成包含新元素的新数组
• 删除元素：用filter方法过滤目标元素，生成新数组

修正后的代码 #

<View style={styles.exerciseheadericongroup}>
  <TouchableOpacity
    onPress={() => {
      let newChosenExercises;
      if (!chosenExercises.includes(exercise.id)) {
        // 创建新数组并添加元素
        newChosenExercises = [...chosenExercises, exercise.id];
      } else {
        // 过滤掉目标元素生成新数组
        newChosenExercises = chosenExercises.filter(id => id !== exercise.id);
      }
      setChosenExercises(newChosenExercises);
      console.log(newChosenExercises);
    }}
  >
    {chosenExercises.includes(exercise.id) ? (
      <Text>added</Text>
    ) : (
      <Text>not added</Text>
    )}
  </TouchableOpacity>
</View>

额外说明 #

• 保持状态变量名统一：确保显示判断与状态操作使用同一个变量（如chosenExercises），避免混淆
• map循环内的TouchableOpacity不影响状态更新，但建议给循环外层组件添加key={exercise.id}保证渲染稳定性
• 不要将状态数组本身作为useEffect依赖，若需监听状态变化，直接使用chosenExercises即可——每次更新都是新数组引用，不会触发无限循环

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