我如何将 useState 从使用数组放置重新分配给他们的 id？答案

【问题标题】：How do i re-assign useState from using array placement to their ids?我如何将 useState 从使用数组放置重新分配给他们的 id？
【发布时间】：2020-10-14 22:50:35
【问题描述】：

我为决策树构建了一组响应，并且我使用 useState 让每个问题的答案使用它们在数组jumpToQuestion 中的位置将您带到不同的响应。这不好，我现在需要删除一些对象，这会弄乱分配。我只是为所有这些都输入了 id，但现在我需要重新配置我的 const [currentQuestion, setCurrentquestion] = useState(0) 让它使用 id 而不是数组放置。

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>
  );
}

【问题讨论】：

标签： arrays reactjs react-hooks use-state

【解决方案1】：

您可以将responses 从对象数组重构为一个对象，其中每个键/值对都是 id/响应。 IE。 id 是键，响应对象是值。保持状态钩子不变（即保留当前问题的 id 并默认为第一个问题），然后您可以继续使用 response[currentQuestion] 来获取您想要的对象。

希望这会有所帮助，祝你好运！

【讨论】：