React TypeScript 中如何为State对象设置默认选中首个元素的初始值

静态配置场景（你的当前代码属于该场景） #

初始化useState时无法直接引用还未完成创建的state内部属性，只需要把固定的按钮配置抽为独立常量，即可直接取首项作为默认激活值，同时可以删掉每个配置项里重复的点击逻辑，精简后代码如下：

import React from 'react';

interface ActiveObject {
    id: number;
    title: string;
};

// 抽离静态按钮配置常量
const BUTTON_CONFIG: ActiveObject[] = [
    { id: 1, title: '1 Week' },
    { id: 2, title: '1 Month' },
    { id: 3, title: '3 Months' }
];

interface ButtonGroupState {
    // 确认数组永远非空可以去掉null类型，否则保留
    activeObject: ActiveObject;
    objects: ActiveObject[];
};

const ButtonGroup: React.FunctionComponent = () => {
    // 初始化时直接用常量首项作为默认激活对象
    const [active, setActive] = React.useState<ButtonGroupState>({
        activeObject: BUTTON_CONFIG[0],
        objects: BUTTON_CONFIG
    })

    const toggleActiveStyles = (index: number) => {
        return active.objects[index] === active.activeObject ? "btn-active" : "btn-plain"
    }

    return (
        <div className="wrapper">
            {active.objects.map((inner, index) => 
                <button 
                    type="button" 
                    className={toggleActiveStyles(index)} 
                    // 点击逻辑统一处理，不用冗余存储在每个配置项中
                    onClick={() => setActive({ ...active, activeObject: active.objects[index] })} 
                    key={inner.id}
                >
                    {inner.title}
                </button>
            )}
        </div>
    )
}

export default ButtonGroup;

如果你的配置数组可能为空，保留activeObject: ActiveObject | null的类型定义即可，初始化时写activeObject: BUTTON_CONFIG[0] ?? null做兜底。

动态配置场景（如果objects是异步获取的动态数据） #

如果你的objects数组是接口请求等方式动态生成的，可以加useEffect监听数组变化，自动设置首项为默认激活值：

React.useEffect(() => {
  if (active.objects.length && !active.activeObject) {
    setActive(prev => ({
      ...prev,
      activeObject: prev.objects[0]
    }))
  }
}, [active.objects])

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