React Native Chip选中状态更新后UI未同步问题求助

你遇到的核心问题是直接修改了普通常量数组里的对象属性，没有触发React的重渲染机制。React组件只有在状态（state）或属性（props）发生变化时才会重新渲染，而你用const声明的interests是普通变量，修改它的内容不会让React感知到变化，所以控制台能看到数据变了，但UI没更新。

解决方案 #

需要把interests改成React的状态变量，并且修改时要创建新的数组/对象（保持不可变更新），让React检测到状态变化从而触发重渲染。

修改后的完整代码：

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Chip } from '@react-native-material/core'; // 根据你实际使用的Chip组件库调整

export default function ChipsTest() {
  // 用useState管理兴趣标签状态
  const [interests, setInterests] = useState([
    { name: 'ABC', selected: false, id: 1 },
    { name: 'XYZ', selected: false, id: 2 },
    { name: 'Bla bla', selected: false, id: 3 }
  ]);

  return (
    <View style={styles.container}>
      {interests.map((interest) => (
        <Chip
          key={interest.id}
          selected={interest.selected}
          onPress={() => {
            // 不可变更新：创建新数组，仅修改目标项的属性
            setInterests(prevInterests => 
              prevInterests.map(item => 
                item.id === interest.id 
                  ? { ...item, selected: !item.selected, name: 'Ali' } // 复制原对象并修改属性
                  : item // 其他项保持原样
              )
            );
          }}
        >
          {interest.name}
        </Chip>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    gap: 8,
  },
});

关键说明 #

• 用useState初始化interests状态，通过setInterests方法更新状态，这是React感知变化的核心
• 更新状态时，通过prevInterests.map生成新数组，对目标项使用{...item}复制原对象后再修改属性，保证状态的不可变性（React依赖状态引用变化触发重渲染）
• 移除了多余的TouchableOpacity，因为多数Chip组件本身自带onPress事件（如果你的Chip组件没有该事件，可重新添加）

这样修改后，点击Chip时状态会正确更新，React会触发组件重渲染，UI就能同步显示最新的选中状态和名称了。

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