React Native如何向State数组添加不存在的元素？

首先说结论：你的代码逻辑是对的，符合React的状态更新规范，唯一需要修正的是一个拼写错误——anwsered应该是answered。修复后就能正常稳定运行，不过针对不同场景，还有些优化空间可以参考：

修正后的基础可运行版本 #

const App = () => {
  const [answered, setAnswered] = useState([])

  const handleConnectionAnswer = deviceId => {
    // 修复拼写错误
    if (!answered.includes(deviceId)) {
      setAnswered(prev => [...prev, deviceId]);
    }
  };
}

这里你用到了函数式更新（prev => [...prev, deviceId]），这一点非常好——因为React的State更新是异步的，函数式更新能确保你基于最新的状态进行修改，不会因为闭包拿到旧状态而出错，这个习惯一定要保持。

针对不同场景的优化方案 #

1. 大数据量场景：用Set提升性能 #

如果answered数组可能会存很多元素，includes方法的查找效率是O(n)（遍历整个数组），频繁调用会拖慢性能。这种情况下，把State换成Set数据结构更合适，因为Set的has方法是O(1)的查找效率：

const App = () => {
  // 初始化时用Set替代数组
  const [answered, setAnswered] = useState(new Set())

  const handleConnectionAnswer = deviceId => {
    if (!answered.has(deviceId)) {
      // 必须创建新的Set实例，不能直接修改原Set
      const newSet = new Set(answered);
      newSet.add(deviceId);
      setAnswered(newSet);
    }
  };

  // 渲染时如果需要数组，用Array.from(answered)转换即可
};

注意：Set是引用类型，不能直接修改原State里的Set（比如answered.add(deviceId)），否则React检测不到状态变化，不会触发组件重渲染，必须创建新的Set实例来更新。

2. 简化代码（小数据量可选） #

如果只是小数据量，也可以把判断和更新逻辑合并成一行，让代码更简洁：

const handleConnectionAnswer = deviceId => {
  setAnswered(prev => 
    prev.includes(deviceId) ? prev : [...prev, deviceId]
  );
};

这种写法把判断逻辑直接放到函数式更新里，不用单独读取当前的answered状态，同样能保证基于最新的状态处理。

总结 #

• 日常小数据量场景：你的代码（修复拼写后）完全够用，简化版也可以按需使用。
• 大数据量场景：优先用Set替代数组，提升查找和更新的性能。

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