React组件中如何不使用虚拟变量，避免修改用作状态的prop变量？

你现在遇到的命名冲突问题，完全不需要靠修改对外prop的名称（比如硬命名为section2）解决，借助ES6对象解构的重命名能力，就可以在保持组件API语义化、不产生冗余虚拟变量的前提下，实现完全相同的逻辑。

• 第一步：先把接口中无意义的section2命名改回符合语义的section，保证组件对外API的直觉性，调用方不需要为了内部命名问题适配奇怪的参数名：

  interface ICurriculumSectionProps {
      section: ICurriculumSection;
      searchText: string;
      sectionIndex: number;
  }
  

• 第二步：解构props时，利用解构语法的重命名规则，把传入的section值临时绑定为语义化的initialSection，仅作为本地state的初始值使用，全程不需要冗余的中间虚拟变量。甚至可以直接把解构写在函数入参位置，进一步精简代码：

  function CurriculumSection({ section: initialSection, searchText, sectionIndex }: ICurriculumSectionProps) {
      // 本地state维护可变的section副本，完全不会修改传入的原始prop对象
      const [section, setSection] = useState(initialSection);
  
      const toggleContent = () => {
          // 额外优化：使用函数式更新替代直接读取闭包中的section值，避免闭包捕获旧值的问题
          setSection(prev => ({...prev, showContent: !prev.showContent}));
      };
  }
  

• 整个逻辑和你原来的实现完全一致：组件首次挂载时，以传入的section对象为初始值创建本地可变state，后续所有状态变更都在本地副本上操作，完全不会污染传入的props对象，符合React不可变状态的要求
• 不存在无意义的section2类命名，也没有额外的虚拟变量，所有变量名的语义都清晰可追溯：initialSection明确标识这是用来做state初始化的传入值，section明确是组件内部维护的可变状态
• 对外的组件API完全没有额外的理解成本，调用方按照常规语义传入section参数即可，不需要感知你内部的状态处理逻辑

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