React子组件更新父组件数组状态问题：点击时设置导航项current为true

你的toggleNavigation函数目前存在几个关键问题：数组遍历未处理全部项、直接修改原状态对象违反React不可变性原则、未触发状态更新。下面是修复后的完整实现：

const toggleNavigation = (name: string) => {
  // 遍历导航数组，创建全新的状态数组（遵循不可变更新原则）
  const newNavigation = navigation.map(nav => {
    // 为每个导航项创建副本，避免直接修改原状态对象
    return {
      ...nav,
      current: nav.name === name // 匹配项设为true，其余自动为false
    };
  });
  // 调用父组件传递的状态更新函数，完成状态同步
  setNavigation(newNavigation);
};

核心细节说明： #

• 状态不可变性：使用对象展开运算符...nav复制每个导航项的属性，生成新对象而非修改原对象。这是React状态更新的核心原则，确保React能精准检测到状态变化并触发组件重渲染。
• 统一处理所有项：通过map遍历全部导航项，确保每次点击后只有目标项的current为true，其余项自动重置为false，避免出现多个激活项的情况。
• 触发状态更新：最后必须调用setNavigation将新数组传递给父组件，完成状态的跨组件同步。

另外补充一个React列表渲染的最佳实践：给每个导航项添加唯一key属性，提升渲染性能：

{navigation.map(item => (
  <span 
    key={item.name} 
    onClick={() => toggleNavigation(item.name)}
    // 可根据current状态添加激活样式，比如：
    className={item.current ? 'bg-gray-100 text-blue-600' : 'text-gray-600'}
  >
    {/* 导航项内容 */}
  </span>
))}

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