试图让我的对象中的对象将它们的 id 用于我的 useState

Question

我正在制作决策树，而我的 const responses 曾经是一个数组，但如果我需要删除或添加一个对象，我的 jumpToQuestion 会弄乱所有响应并变得不对齐。所以，我想我可以使我的数组成为一个对象，其中包含对象和一些数组，并且响应可以通过 id 链接而不是数组放置来跳转。我刚刚为我的所有回复分配了 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(1);

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

Answer 1

我同意您的评估，即您应该使用 id 与数组的索引来查找问题。但是，我会创建对象数组，并且 id 应该是一个简单的 slug。您可以使用slugify 提供帮助。

我的响应对象：

const responses = [
  {
      id: question_1,
      questionText: "Is the account data entry?",
      answerOptions: [
        { answerText: "No", isCorrect: false },
        { answerText: "Yes", isCorrect: true, jumpToQuestion: question_6 },
      ],
      notes: [
      ],
  },
  {
      id: question_2,
      questionText: "Is this customer 1 or 2?",
      answerOptions: [
        { answerText: "No", isCorrect: false },
        { answerText: "Yes", isCorrect: true, jumpToQuestion: question_7 },
      ],
      notes: [
      ]
  },
  {
      id: question_3,
      questionText: "Is the caller",
      answerOptions: [
        { answerText: "Power of Attorney/Conservator", isCorrect: true, jumpToQuestion: question_15 },
        { answerText: "Lawyer", isCorrect: true, jumpToQuestion: question_13 },
        { answerText: "Emergency Responder", isCorrect: true, jumpToQuestion: question_14 },
        { answerText: "Wanting to make a payment", isCorrect: true, jumpToQuestion: question_14 },
        { answerText: "None", isCorrect: false },
      ],
      notes: [
      ],
  }

然后可以在您的 html 中使用此 id，并且应该提供一种简单的方法来锚定问题的链接。我不会为您的 ids 推荐任意整数，因为您想确保它们不会与任何其他潜在元素发生冲突。

如果您需要一种简单的方法来返回特定响应，您也可以在代码中使用 Lodash find 方法：

_.find(responses, ['id','question_1'])

Answer 2

我觉得一切都很好。 据我所知，使用 ID 来识别特定项目（例如用户）是一种很好的做法。

但是，我会考虑做 ARRAY of OBJECTS，这样您就可以轻松迭代，并根据需要进行调整，我认为？

查看：CODE SANDBOX

我试着看看它是如何工作的，问题从 1 开始，如果回答错误，则显示下一个，如果按是，它将问题设置为 6 等等。