React TypeScript实现点击切换数组对象的isSelected选中状态

你的代码里timerOptions是静态常量，直接修改它不会触发组件重新渲染，也不符合React状态管理规范。要实现点击单选的效果，需要用useState来管理选项状态，具体实现如下：

import { useState } from 'react';
// 假设TimerOptions类型已定义
type TimerOptions = {
  text: string;
  isSelected: boolean;
};

export default function TimerSelector() {
  // 用useState初始化选项状态
  const [timerOptions, setTimerOptions] = useState<TimerOptions[]>([
    {
      text: "Daily",
      isSelected: true,
    },
    {
      text: "Weekly",
      isSelected: false,
    },
    {
      text: "Monthly",
      isSelected: false,
    },
  ]);

  return (
    <Box>
      {timerOptions.map((option) => {
        return (
          <Box
            key={option.text}
            bg={option.isSelected ? theme.bg.primary : theme.bg.boxes}
            onClick={() => {
              // 更新状态：所有选项设为未选中，当前点击项设为选中
              setTimerOptions(prevOptions => 
                prevOptions.map(opt => ({
                  ...opt,
                  isSelected: opt.text === option.text
                }))
              );
            }}
          >
            <Text color={option.isSelected ? "#fff" : "#000"}>
              {option.text}
            </Text>
          </Box>
        );
      })}
    </Box>
  );
}

关键说明 #

• 使用useState管理timerOptions，状态变化时会自动触发组件重新渲染，更新UI。
• 点击事件中用函数式更新（prevOptions）获取最新状态，避免闭包导致的状态不一致问题。
• 通过map生成新数组，仅让与点击项text匹配的选项isSelected为true，其余为false，实现单选效果。

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