React Native中数组映射生成按钮时如何正确设计onPress函数

解决方案 #

你不需要为每个按钮单独声明布尔状态，直接通过「当前选中的唯一标识」判断按钮是否禁用即可，适配动态数组的改造逻辑如下：

1. 简化状态定义：删除所有单个按钮的布尔状态，仅保留存储选中值的状态即可，通过选中值和当前按钮的唯一标识匹配，自动生成disabled属性
2. 通用点击处理函数：接收当前按钮对应的数据项作为入参，点击时直接更新选中值，天然实现「当前选中按钮禁用、其余按钮启用」的单选逻辑
3. 数组映射渲染：遍历从接口拿到的names数组生成按钮，无需硬编码固定数量的按钮

改造后完整代码：

// 接口返回的动态数组，支持任意长度
const names: Array<{name: string, age: number}> = [
  {name: 'Bob', age: 20},
  {name: 'Lisa', age: 26}, 
  {name: 'Tom', age: 24},
  // 后续新增数据无需修改其他逻辑
];

const App = () => {
  // 仅保留存储选中名称的状态即可，无需单独维护每个按钮的布尔值
  const [clickedName, setClickedName] = useState("");

  // 通用点击处理函数，接收当前按钮对应的数据项
  const handleBtnPress = (item: {name: string, age: number}) => {
    setClickedName(item.name);
    // 如果需要用到选中项的其他属性（比如age），直接从入参item取即可
  };

  return(
    <View>
      {/* 直接遍历数组动态生成按钮，支持任意数量 */}
      {names.map((item, index) => (
        <Button 
          key={item.name} // 无重名时用name作为key，性能更好，重名可换为index
          style={styles.btn} 
          disabledStyle={styles.btnD} 
          // 仅当当前按钮对应的名称是已选中名称时，才禁用按钮
          disabled={clickedName === item.name} 
          // 点击时把当前项传入处理函数
          onPress={() => handleBtnPress(item)} 
        />
      ))}
      <Text>{clickedName}</Text>
    </View>
  )
}

如果数组项存在重名情况，可以换用索引或者其他唯一字段（比如用户ID）作为选中标识，把clickedName改为存储对应唯一值即可，整体逻辑完全不变。

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