React状态数组操作不稳定，是否有更优实现方案？

嘿，我来帮你看看这个问题！你的实现方向其实没完全错，但有两个关键的小问题导致了效果不稳定，咱们一步步理清楚：

问题1：直接修改原状态数组，违反React不可变原则 #

你在移除收藏ID的时候写了这段代码：

const newArray = starredArray; 
const index = newArray.indexOf(starred); 
if (index > -1) { 
  newArray.splice(index, 1); 
  setStarredArray(newArray); 
}

这里const newArray = starredArray;只是把变量指向了原状态数组的引用，并没有创建新数组。然后用splice直接修改这个数组，属于直接篡改React状态。React依赖状态的引用变化来检测更新，直接修改原数组的话，React可能察觉不到状态变了，自然不会触发重新渲染，导致操作偶尔不生效。

问题2：useEffect依赖项不完整 #

第一个useEffect的依赖数组是[starred, setStarred]，但你在effect逻辑里用到了starredArray，却没把它加入依赖项。这会导致：当starredArray更新时，这个effect不会重新触发，而且还可能捕获到旧的starredArray值，后续的判断和操作都会基于旧数据，逻辑自然会出错。

修复方案：简化逻辑 + 遵循不可变原则 #

其实你完全不需要额外的starred状态，直接在按钮点击时处理数组更新就行，用函数式更新能确保拿到最新的状态，同时始终创建新数组：

1. 简化状态定义

只保留收藏数组的状态即可：

const [starredArray, setStarredArray] = useState([]);

2. 重构按钮点击逻辑

把判断和数组更新直接写在onPress里，用函数式更新获取最新状态：

<TouchableOpacity 
  style={styles.previewStar} 
  onPress={() => {
    setStarredArray(prevArray => {
      // 检查当前ID是否已收藏
      if (prevArray.includes(previewId)) {
        // 移除：过滤掉当前ID，返回新数组
        return prevArray.filter(id => id !== previewId);
      } else {
        // 添加：展开原数组，加入新ID
        return [...prevArray, previewId];
      }
    });
  }}
>
  <Icon name="star" size={20} color="dodgerblue" />
</TouchableOpacity>

3. 保留日志用的useEffect（可选）

这个没问题，只需要把多余的setStarredArray从依赖里去掉就行：

useEffect(() => { 
  console.log("starredArray"); 
  console.log(starredArray); 
}, [starredArray]);

为什么这样改就稳定了？ #

• 函数式更新：setStarredArray(prevArray => ...)能确保每次操作都基于最新的状态数组，避免闭包导致的旧值问题。
• 不可变操作：用filter和扩展运算符...创建新数组，完全没有修改原状态，React能准确检测到状态变化，每次操作都会触发正确的重新渲染。
• 简化逻辑：去掉了多余的starred状态，减少了状态同步的潜在问题。

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