有没有办法在使用多个 useState 时简化条件渲染？答案

【问题标题】：Is there a way to simplify conditional rendering while using multiple useState?有没有办法在使用多个 useState 时简化条件渲染？
【发布时间】：2021-09-28 02:51:14
【问题描述】：

我在一个页面上显示了 3 个不同的音频文件。我想根据播放的音频文件显示不同的文本。

这是我目前所拥有的：https://btangsp.github.io/essae_rating/

但是，在我看来，我拥有的代码并不是很优雅。有没有办法让它更紧凑但仍然可读？

目前我的代码大致如下形式：

const [refAudioEnded, setRefAudioEnded] = useState(false);
const [firstAudioEnded, setFirstAudioEnded] = useState(false);
const [secondAudioEnded, setSecondAudioEnded] = useState(false);

if (secondAudioEnded) {
    // display text A
} else if (firstAudioEnded) {
    // display text B
} else if (refAudioEnded) {
    // display text C
}

编辑：这里是详细的：

const [refEnded, setRefEnded] = useState(false);
const [firstEnded, setFirstEnded] = useState(false);
const [secondEnded, setSecondEnded] = useState(false);

function Task_Page_Conditional(taskInstruction, shuffledFiles, choice, setChoice, audioRef, refEnded, audioEnded, setAudioEnded) {
    return (
        <div className="section col-all">
            {taskInstruction}
            <AudioRadioButtonGroup name={'test-abx'} 
                files={shuffledFiles} 
                choice={choice}
                setChoice={setChoice}
                audioRefs={audioRef}
                refEnded={refEnded}
                audioEnded={audioEnded}
                setAudioEnded={setAudioEnded}
                />
        </div>
    );
}

let taskInstruction = null;
let task_pt1 = null;
const shuffledFiles = Shuffle(['noisy/' + shuffledData[index].noisy, 'enhanced/' + shuffledData[index].enhanced]);

if (secondEnded) {
    taskInstruction = (
        <ReactMarkdown source={text.audio_group.question}/>
    );
    task_pt1 = Task_Page_Conditional(taskInstruction, shuffledFiles, choice, setChoice, 
            [audioRef_2, audioRef_3], refEnded, secondEnded, setSecondEnded);
} else if (firstEnded) {
    taskInstruction = (
        <ReactMarkdown source={text.audio_group.second_audio}/>
    );
    task_pt1 = Task_Page_Conditional(taskInstruction, shuffledFiles, choice, setChoice, 
            [audioRef_2, audioRef_3], refEnded, secondEnded, setSecondEnded);
} else if (refEnded) {
    taskInstruction = (
        <ReactMarkdown source={text.audio_group.first_audio}/>
    );
    task_pt1 = Task_Page_Conditional(taskInstruction, [shuffledFiles[0]], choice, setChoice, 
            [audioRef_2], refEnded, firstEnded, setFirstEnded);
}

【问题讨论】：

我想是的，但一个好的解决方案需要查看代码周围的更多上下文 - 你能展示更多的组件，包括// display text A吗？
是的，抱歉，我刚刚添加了一个更详细的部分。虽然有点乱，这是我想解决的问题，但我不确定从哪里开始。 @CertainPerformance
Brian，你正在维护 3 个不同的状态。您需要 3 个状态还是它实际上是具有 3 个事件的单个状态？你会同时拥有两个吗？
@MehulThakkar 实际上，您提出了一个很好的观点。我认为它在技术上是 1 个状态，有 3 个事件/阶段。因此，实际上让状态由字符串或索引而不是布尔值表示可能会更好。谢谢！

标签： javascript reactjs react-native react-hooks

【解决方案1】：

@Brian 正如您在评论中提到的，如果您可以在一个状态下处理 3 个状态，那么这将减少冗余状态。

这是使用单一状态重新格式化的代码。

const [state, setState] = useState('');

function Task_Page_Conditional(taskInstruction, shuffledFiles, choice, setChoice, audioRef, refEnded, audioEnded, setAudioEnded) {
    return (
        <div className="section col-all">
            {taskInstruction}
            <AudioRadioButtonGroup name={'test-abx'} 
                files={shuffledFiles} 
                choice={choice}
                setChoice={setChoice}
                audioRefs={audioRef}
                refEnded={refEnded}
                audioEnded={audioEnded}
                setAudioEnded={setAudioEnded}
                />
        </div>
    );
}

const getData = () => {
  let taskInstruction = null;
  let task_pt1 = null;
  const shuffledFiles = Shuffle(['noisy/' + shuffledData[index].noisy, 'enhanced/' + shuffledData[index].enhanced]);

  switch(state) {
    case 'taskInstruction': {
      taskInstruction = (
            <ReactMarkdown source={text.audio_group.question}/>
        );
      task_pt1 = Task_Page_Conditional(taskInstruction, shuffledFiles, choice, setChoice, 
                [audioRef_2, audioRef_3], refEnded, secondEnded, setSecondEnded);
      break;
    }
    case 'firstEnded': {
      taskInstruction = (
          <ReactMarkdown source={text.audio_group.second_audio}/>
      );
      task_pt1 = Task_Page_Conditional(taskInstruction, shuffledFiles, choice, setChoice, 
              [audioRef_2, audioRef_3], refEnded, secondEnded, setSecondEnded);
      break;
    }
    case 'refEnded': {
      taskInstruction = (
          <ReactMarkdown source={text.audio_group.first_audio}/>
      );
      task_pt1 = Task_Page_Conditional(taskInstruction, [shuffledFiles[0]], choice, setChoice, 
              [audioRef_2], refEnded, firstEnded, setFirstEnded);
      break;
    }
    default:
      // Any default case here
  }

  
  return {taskInstruction, task_pt1, shuffledFiles}
}

const {taskInstruction, task_pt1, shuffledFiles} = getData()

【讨论】：