React实现：页面加载默认激活首个团队成员项并支持切换

你的核心问题在于状态类型不匹配和错误的useEffect使用：

1. 初始状态isVisible设为true（布尔值），但后续是和数字类型的索引i比较，导致第一个成员（索引0）的isVisible === i永远为false，默认激活逻辑失效。
2. 你的useEffect写法完全错误：回调函数不接受参数i，里面的i未定义，而且试图用布尔值覆盖索引值，破坏了原本的索引匹配逻辑。

修正步骤： #

1. 修正初始状态

直接把isVisible的初始值设为第一个成员的索引0，不需要额外的useEffect：

const [isVisible, setIsVisible] = useState(0); // 默认激活索引0的成员

2. 调整toggle函数逻辑

保持你原本的切换逻辑，确保状态值始终是索引数字或null：

const toggle = i => {
  // 点击当前激活项则取消激活，否则切换到新项
  setIsVisible(isVisible === i ? null : i);
};

3. 保持条件判断一致性

现在isVisible是数字或null，和索引i的比较完全匹配，模板里的类名判断无需修改。

完整修正后的代码： #

function KeyTeamMembers(props) {
    // 初始状态设为0，默认激活第一个成员
    const [isVisible, setIsVisible] = useState(0);

    const toggle = i => {
        // 点击当前激活项则取消，否则切换到新项
        setIsVisible(isVisible === i ? null : i);
    };

    return (
        <KeyTeamMembersContainer>
            <Container width={14}>
                <Hello><span>2.4</span>Key Team Members</Hello>
                <FlexInline>
                    <HalfWidth>
                        <FlexWrap>
                            {props.team.map((person, i) => (
                                <TeamCardSmall key={slugify(person.firstName)} index={i}>
                                    <TeamCardContent onClick={() => toggle(i)}>
                                        <ThumbnailCover className={isVisible === i ? 'hide-cover' : 'cover' }>
                                            <p>{person.firstName} {person.lastName}</p>
                                        </ThumbnailCover>
                                        <img src={person.image.fluid.src} alt="Test Images" className="card-item" />
                                    </TeamCardContent>
                                </TeamCardSmall>
                            ))}
                        </FlexWrap>
                    </HalfWidth>
                    <HalfWidth>
                        {props.team.map((person, i) => (
                            <TeamCardInfo className={isVisible === i ? 'accordionContent show' : 'accordionContent' } key={slugify(person.lastName)} index={i}>
                                <TeamCardBio>
                                    <h3>{person.firstName} {person.lastName}</h3>
                                    <BioRole>{person.role}</BioRole>
                                    <p>{person.bio.bio}</p>
                                </TeamCardBio>
                            </TeamCardInfo>
                        ))}
                    </HalfWidth>
                </FlexInline>
            </Container>
        </KeyTeamMembersContainer>
    );
}

额外说明： #

• 如果希望始终保持至少一个成员激活（不能取消到null状态），可以修改toggle函数：

  const toggle = i => {
      // 点击当前激活项不做操作，否则切换到新项
      if (isVisible !== i) {
          setIsVisible(i);
      }
  };
  

• 移除了模板里多余的空<>包裹，因为每个map项只返回一个组件，不需要额外的Fragment。

内容的提问来源于stack exchange，提问作者Sam St Aubyn