React Native中map渲染Pressable时如何设置按钮默认选中颜色

三个核心问题导致首屏默认选中效果失效：

• 绕了多余的初始化逻辑：useEffect的执行时机是组件完成首次挂载之后，你把初始赋值写在这里，第一次渲染页面的时候feedshot还是空字符串，自然匹配不到选中样式，还平白多一次无效重渲染。
• 判断逻辑字段不匹配：你给feedshot赋的初始值是"basicfeed"，这是数组项的value字段内容，但写样式判断的时候却拿v.label和feedshot做对比——第一个按钮的label是"hello"，永远和"basicfeed"对不上，当然不会显示选中色。
• 基础语法问题：feedPeriod数组多套了一层大括号、对象之间缺分隔逗号；onPress直接写feedbtn(v)会在组件渲染阶段就直接执行函数，不是点击时才触发。

• 删掉用来初始化状态的useEffect，直接给useState传初始值，首屏渲染第一次就能拿到正确的默认选中值
• 统一判断逻辑：存到feedshot里的是哪个字段，样式对比就用哪个字段，不要value和label混着用
• 修复数组语法、事件绑定的写法问题

// 直接给状态设置初始值，首屏渲染即可拿到默认值
const [feedshot, setFeedshot] = useState<string>('basicfeed')
const [innerState, setInnerState] = useState({
  // 保留你原有innerState的其他字段
  feedPeriod: "basicfeed"
})

// 修复数组语法错误
const feedPeriod = [
  {label: "hello", value: "basicfeed"},
  {label: "hi", value: "jeong"},
  {label: "bye", value: "hyang"}
]

// 按钮点击逻辑，用柯里化接收参数，避免渲染时直接执行
const feedbtn = (item) => () => {
  setFeedshot(item.value)
  // 用函数式更新避免拿到旧的innerState值
  setInnerState(prev => ({...prev, feedPeriod: item.value}))
}

return (
  <View style={insertSubPageStyle.feedkindwrapper}>
    {feedPeriod.map((v, i) => {
      return (
        <Pressable 
          style={[
            // 对比字段和存入feedshot的字段保持一致，这里存的是value就比v.value
            { backgroundColor: v.value === feedshot ? '#51a868' : '#94d4a5' },
            insertSubPageStyle.feedkindPressable
          ]}
          key={i}
          onPress={feedbtn(v)}
        >
          {/* 记得给按钮加文本内容，否则渲染出来是空白块 */}
          <Text style={{color: '#fff'}}>{v.label}</Text>
        </Pressable>
      )
    })}
  </View>
)

如果你业务逻辑里确实需要把label值存入feedshot，那就把初始值改成第一个项的label"hello"，样式判断改回v.label === feedshot即可，核心原则就是存入状态的字段和判断时取的字段必须完全对应。

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