时间戳

首页 > 解决方案 > 有没有办法在使用多个 useState 时简化条件渲染？

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

问题描述

我在一个页面上显示了 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);
}

标签： javascriptreactjsreact-nativereact-hooks

解决方案

@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()

推荐阅读