React Native更新useState后网格项背景未动态更新的问题

• React Native项目包含自定义网格组件，点击网格项时需更新useState定义的状态数组：

  const [selectedHomeTypes, setSelectedHomeTypes] = useState(['Houses'])
  

• 预期效果：选中项加入数组后显示蓝色背景，取消选中时移除背景
• 当前异常：selectedHomeTypes数组可正常更新，但网格项背景无变化，始终仅默认项显示蓝色背景
• 当前使用的更新函数代码：

  const updateSelectedHomeTypes = (selected) => {
    let selectedHome = selectedHomeTypes
    if(selectedHome.length == 0){
      setSelectedHomeTypes(['Houses'])
    }
    if(selectedHome.includes(selected)){
      let target = selectedHome.indexOf(selected)
      selectedHome.splice(target, 1)
      setSelectedHomeTypes(selectedHome)
    } else {
      setSelectedHomeTypes([...selectedHome, selected])
    }
  }
  

直接修改了原状态数组的引用：

• let selectedHome = selectedHomeTypes是引用赋值，selectedHome和原状态数组指向同一个内存地址
• 使用splice修改原数组后，将同一个数组引用传给setSelectedHomeTypes，React会判定状态未发生变化，因此不触发组件重渲染，导致网格项的背景样式无法更新

1. 修正状态更新函数（确保每次返回新数组引用） #

const updateSelectedHomeTypes = (selected) => {
  setSelectedHomeTypes(prev => {
    // 处理空数组的默认值
    const current = prev.length === 0 ? ['Houses'] : prev;
    
    if (current.includes(selected)) {
      // 过滤掉选中项，返回新数组
      return current.filter(item => item !== selected);
    } else {
      // 扩展原数组并添加新项，返回新数组
      return [...current, selected];
    }
  });
}

• 使用函数式更新setSelectedHomeTypes(prev => ...)，确保拿到最新的状态值
• 始终返回新的数组引用（filter或扩展运算符都会创建新数组），触发React重渲染

2. 确保网格项动态绑定背景样式 #

在GridItemComponent中，根据是否被选中动态设置背景色：

// GridItemComponent.js
const GridItemComponent = ({ item, isSelected }) => {
  return (
    <View 
      style={{
        backgroundColor: isSelected ? 'blue' : 'white',
        // 其他样式
      }}
    >
      <Text>{item}</Text>
    </View>
  );
};

在主页面渲染网格项时，传递isSelected属性：

// 主页面渲染代码
{homeTypes.map(item => (
  <GridItemComponent
    key={item}
    item={item}
    isSelected={selectedHomeTypes.includes(item)}
    onPress={() => updateSelectedHomeTypes(item)}
  />
))}

如果已知待删除项的索引，可通过以下两种方式创建新数组，确保触发重渲染：

1. 使用filter过滤：

const removeItemByIndex = (targetIndex) => {
  setSelectedHomeTypes(prev => prev.filter((_, idx) => idx !== targetIndex));
};

2. 使用slice拼接数组：

const removeItemByIndex = (targetIndex) => {
  setSelectedHomeTypes(prev => [
    ...prev.slice(0, targetIndex),
    ...prev.slice(targetIndex + 1)
  ]);
};

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