React Native中使用useState修改循环渲染单个子项选中样式的问题

问题原因 #

你当前所有选项共用了同一组全局的颜色状态，只要修改状态，所有绑定了这组状态的选项样式都会同步更新，自然会出现全部变色的问题。

解决方案 #

把原来存全局颜色的状态，改成存当前选中项的唯一标识，渲染时每个选项自行判断是否是选中项，再对应加载样式即可，修改后的代码如下：

1. 修改状态声明

// 假设item有唯一id字段，若没有可以用数组下标index作为标识
const [selectedPropId, setSelectedPropId] = useState(null);
// 固定样式提前定义，避免重复硬编码
const DEFAULT_BG = '#EDEDEE';
const DEFAULT_TEXT_COLOR = '#000000';
const SELECTED_BG = 'red';
const SELECTED_TEXT_COLOR = 'white';

2. 修改渲染逻辑

{propType.map((item, index) => {
  // 没有item.id的话，这里把判断条件换成selectedPropId === index即可
  const isSelected = selectedPropId === item.id;
  return (                      
    <TouchableOpacity 
      style={{
        backgroundColor: isSelected ? SELECTED_BG : DEFAULT_BG,
        ...ListingFilterStyles.filterAnyBtn,
        ...ListingFilterStyles.btnMale,
      }}
      // 要是用index当标识，这里改成onPress={() => proptypes(index)}
      onPress={() => proptypes(item)}>
       <Text style={{color: isSelected ? SELECTED_TEXT_COLOR : DEFAULT_TEXT_COLOR}}>{item.value}</Text>
   </TouchableOpacity>
  );
})}

3. 修改点击事件逻辑

const proptypes = item => {
  // 要是用index当标识，这里参数改成index，赋值setSelectedPropId(index)即可
  setSelectedPropId(item.id);
  // 如果需要支持点击已选中项取消选中，可以改成下面的写法
  // setSelectedPropId(prev => prev === item.id ? null : item.id)
}

注意事项 #

如果你的propType数组会动态增删、排序，不要用数组下标index作为唯一标识，最好给每个item配置固定的唯一id做判断，避免出现选中状态错位的问题。

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