使用多个useState管理音频状态时如何简化条件渲染逻辑？

优化核心思路 #

• 合并互斥状态：你当前使用的三个布尔状态是线性互斥的，只会按refEnded→firstEnded→secondEnded的顺序触发，同一时间只有一个生效，可以合并为单个枚举状态，大幅减少冗余状态的维护成本
• 抽离配置映射表：把不同步骤对应的文案、传参规则都提前放到配置数组中，消除多层if-else判断，后续新增/修改步骤只需要调整配置即可，可维护性更高
• 优化组件传参：把原来的长参数列表改为对象解构，可读性更强，避免传参顺序错误导致的bug

优化后代码示例 #

// 合并为单个步骤状态：0=未开始播放，1=参考音频播放完成，2=第一个对比音频播放完成，3=第二个对比音频播放完成
const [playStep, setPlayStep] = useState(0);

// 统一维护各步骤配置，后续调整步骤逻辑直接改这个数组即可
const stepConfig = [
  // 步骤0：初始未播放状态，可按需补充配置
  {},
  // 步骤1：参考音频播放完成
  {
    textKey: 'first_audio',
    fileSlice: (files) => [files[0]],
    audioRefs: [audioRef_2],
    afterEnd: () => setPlayStep(2)
  },
  // 步骤2：第一个对比音频播放完成
  {
    textKey: 'second_audio',
    fileSlice: (files) => files,
    audioRefs: [audioRef_2, audioRef_3],
    afterEnd: () => setPlayStep(3)
  },
  // 步骤3：第二个对比音频播放完成
  {
    textKey: 'question',
    fileSlice: (files) => files,
    audioRefs: [audioRef_2, audioRef_3],
    afterEnd: () => {}
  }
];

// 组件参数改为对象解构，不用记忆参数顺序
function TaskPageConditional({taskInstruction, shuffledFiles, choice, setChoice, audioRefs, refEnded, audioEnded, setAudioEnded}) {
  return (
    <div className="section col-all">
      {taskInstruction}
      <AudioRadioButtonGroup 
        name="test-abx"
        files={shuffledFiles}
        choice={choice}
        setChoice={setChoice}
        audioRefs={audioRefs}
        refEnded={refEnded}
        audioEnded={audioEnded}
        setAudioEnded={setAudioEnded}
      />
    </div>
  );
}

// 直接按当前步骤取对应配置，无需多层if判断
const currentConfig = stepConfig[playStep];
const shuffledFiles = Shuffle(['noisy/' + shuffledData[index].noisy, 'enhanced/' + shuffledData[index].enhanced]);
const taskInstruction = <ReactMarkdown source={text.audio_group[currentConfig.textKey]} />;
const task_pt1 = (
  <TaskPageConditional 
    taskInstruction={taskInstruction}
    shuffledFiles={currentConfig.fileSlice(shuffledFiles)}
    choice={choice}
    setChoice={setChoice}
    audioRefs={currentConfig.audioRefs}
    refEnded={playStep >= 1}
    audioEnded={playStep >= 2}
    setAudioEnded={currentConfig.afterEnd}
  />
);

优化收益 #

• 状态从3个减少到1个，完全避免了多状态不一致的潜在bug
• 消除了多层if-else嵌套，代码逻辑更直观
• 代码行数减少近40%，可读性和可维护性都明显提升

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