Блог

Я создал массив ответов для дерева решений и использую useState, чтобы ответы на каждый вопрос приводили вас к другому ответу, используя их размещение в массиве jumpToQuestion . Это было нехорошо, сейчас мне нужно удалить некоторые объекты, и это испортит задания. Я просто ввел идентификаторы для всех из них, но теперь мне нужно перенастроить свой const [currentQuestion, setCurrentquestion] = useState(0) , чтобы он использовал идентификаторы вместо размещения массива.

PS НЕ ВЕСЬ МАССИВ НАХОДИТСЯ ЗДЕСЬ, ВОТ ПОЧЕМУ НЕКОТОРЫЕ ПЕРЕХОДЫ ПРОХОДЯТ МИМО ТОГО, ЧТО ЗДЕСЬ. Я СДЕЛАЛ ЭТО, ЧТОБЫ КОД БЫЛ КОРОТКИМ.

 const responses = [
    {
      id: 1,
      questionText: "Is the account data entry?",
      answerOptions: [
        { answerText: "No", isCorrect: false },
        { answerText: "Yes", isCorrect: true, jumpToQuestion: 6 },
      ],
      notes: [
      ],
    },
    {
      id: 2,
      questionText: "Is this customer 1 or 2?",
      answerOptions: [
        { answerText: "No", isCorrect: false },
        { answerText: "Yes", isCorrect: true, jumpToQuestion: 7 },
      ],
      notes: [
      ],
    },
    {
      id: 3,
      questionText: "Is the caller",
      answerOptions: [
        { answerText: "Power of Attorney/Conservator", isCorrect: true, jumpToQuestion: 15 },
        { answerText: "Lawyer", isCorrect: true, jumpToQuestion: 13 },
        { answerText: "Emergency Responder", isCorrect: true, jumpToQuestion: 14 },
        { answerText: "Wanting to make a payment", isCorrect: true, jumpToQuestion: 14 },
        { answerText: "None", isCorrect: false },
      ],
      notes: [
      ],
    },
    

  const [currentQuestion, setCurrentQuestion] = useState(0);

  const handleAnswerButton = (jumpToQuestion) => {
    const nextQuestion = jumpToQuestion || currentQuestion   1;
    setCurrentQuestion(nextQuestion);
  }


  return (
    <div className="App">
      <div className="appWrapper">
        <div className="headerContainer">
          <div className="alderlogo">
            <img src={Logo} alt="Logo" />
          </div>
          <div class="vl"></div>
          <h1 className="headerName">Verification Procedure</h1>
        </div>

        <button className="backBtn"><i class="fas fa-arrow-left fa-2x"></i></button>

        <h2>{responses[currentQuestion].questionText}</h2>
        <div className="answerSection">
          {responses[currentQuestion].answerOptions.map((answerOption) => (
            <button onClick={() => { handleAnswerButton(answerOption.jumpToQuestion) }}>{answerOption.answerText}</button>
            ))}
        </div>
        <div class="hl"></div>
        <div className="notesContainer">
          {responses[currentQuestion].notes.map((notePoints) => (
            <li>{notePoints.note}</li>
            ))}
          <h3>{responses[currentQuestion].addnotes}</h3>
        </div>
      </div>
    </div>
  );
}
  

Вы можете преобразовать responses массив объектов в объект, где каждая пара ключ / значение является идентификатором / ответом. Т.Е. Идентификатор — это ключ, а объект ответа — значение. Оставьте свой хук состояния как есть (т. Е. Сохраняет идентификатор текущего вопроса и по умолчанию задается первый вопрос), а затем вы можете продолжать использовать response[currentQuestion] для получения нужного объекта.

Надеюсь, это поможет и удачи!