React Native自定义单选按钮点击无响应问题排查求助

核心问题及解决方案 #

1. onPress函数中map缺少return语句 #

原代码里map用大括号包裹箭头函数，但没显式返回处理后的对象，导致map返回全是undefined的数组，状态根本没更新。

修复后的onPress函数：

const onPress = option => {
  setIsAvailable(prevState => 
    prevState.map(isAvailableOption => {
      // 必须显式return处理后的选项对象
      return isAvailableOption.id === option.id
        ? {...isAvailableOption, selected: true}
        : {...isAvailableOption, selected: false};
    })
  );
};

额外优化：用函数式更新（prevState）避免闭包导致的旧状态引用问题，状态更新更可靠。

2. Row组件内部未正确绑定外部传入的onPress回调 #

Row组件里TouchableOpacity的onPress绑定的是内部未定义的变量，不是外部传进来的onPress props，点击事件根本触发不了状态更新逻辑。

修复后的Row组件单选按钮部分代码：

rightComponent === 'radio' ? (
  <TouchableOpacity
    style={styles.radioBtn}
    onPress={props.onPress} // 绑定外部传入的onPress回调
    key={key}>
    {isSwitched === true ? (
      <>
        <Ionicons
          name={'radio-button-on-outline'}
          style={{...styles.rightIcon, ...rightIconColor}}
        />
      </>
    ) : (
      <>
        <Ionicons
          name={'ellipse-outline'}
          style={{...styles.rightIcon, ...rightIconColor}}
        />
      </>
    )}
  </TouchableOpacity>
) : (...)

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