Javascript 尝试从数据库呈现对象数组时出错

我试图为测验应用加载一系列问题，但在从JSON数据库收集问题的方法中，出现以下警告错误：

错误：对象作为React子对象无效（找到：具有键{number，answer，isCorrect}的对象）。如果要呈现子对象集合，请改用数组

getRandomizedQuestions=（）=>{
康斯特阿皮乌尔酒店http://localhost:3001/questions'
获取（APIRL）
.then（（response）=>response.json（））
。然后（（结果）=>{
log（“来自数据库：”）；
控制台日志（结果）；
让AmountOquestions=result.length；
设randomizedResult=[]；
for（设i=0；i{
console.log（'发生意外错误'，错误）；
});
}; 

您返回的是一个answer对象

{number，answer，isCorrect}

您应该在映射到疑问之后映射到answer：

render() {
  // add logic and constant here
  return (
    //... add another component or jsx
    <div className='show-score'>{showScore}</div>
    <div className='quiz-window'>
      {this.state.questions.map((question, index) => (
        <div key={index}>
          {question.title}
          <div className='answer-section'>
            {question.answers.map(answer => (
              <button key={answer.number} onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                {answer.answer}
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
    //... add another component or jsx
  )
}

---

您返回的对象是answer

{number，answer，isCorrect}

您应该在映射到问题之后映射到answer：

render() {
  // add logic and constant here
  return (
    //... add another component or jsx
    <div className='show-score'>{showScore}</div>
    <div className='quiz-window'>
      {this.state.questions.map((question, index) => (
        <div key={index}>
          {question.title}
          <div className='answer-section'>
            {question.answers.map(answer => (
              <button key={answer.number} onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                {answer.answer}
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
    //... add another component or jsx
  )
}

---

谢谢你的回答，但我仍然得到相同的错误代码unfortunately@nikva这是正确的答案！但是我在哪里添加showcore呢？功能？你能给我完整的渲染吗？好的，我会根据你的评论制作一个渲染函数。我制作了一个codesandbox，如果它有助于回答问题的话，但是我仍然得到了与代码相同的错误unfortunately@nikva这是正确的答案！但是我在哪里添加showcore呢？功能？你能给我完整的渲染吗？好的，我会根据你的评论制作一个渲染函数。我制作了一个代码沙盒，如果该帮助扫描您添加

render（）

？无法添加整个渲染（太长），但我在这里使用它：`render（）{return（{this.state.questions.map（（question，index）=>（{question.title}））}`{this.state.questions.map（（answerOption，index）=>（this.handleanswerroptionclick（answerOption.isCorrect）}>{answerOption.answers}}}`你能分享你的问题JSON数据吗？我想我现在明白了，第二个映射有问题，你应该映射到答案中，而不是问题中，分享你的JSON数据我会给你一个例子。时间太长了，所以我把它分成2:{“问题”：[{“id”：0，“标题”：“Pi Dezimal”，“作者”：“Timo”，“isMC”：false，“问题”：“Wie lauten die 4 ersten Dezimaltellen von Pi？”，“答案”：“1415”，“类别”：null}，{“id”：1，“标题”：“Längster Fluss”，“作者”：“Timo”，“isMC”：true，“问题”“：“Welcher ist der längte Fluss der Welt？”，“answers:[是的，现在检查我的答案，顺便说一句，你应该在你的问题中添加这个细节！你也可以添加

render（）

吗？不能添加整个渲染（太长），但我在这里使用它：`render（）{return this.state.questions.map（（问题，索引）=>（{question.title}））}`{this.state.questions.map（（answerOption，index）=>（this.handleansweroption.isCorrect）}>{answerOption.answers}'你能分享你的问题JSON数据吗？我想我现在明白了，第二个映射有问题，你应该映射到答案中，而不是问题中，分享你的JSON数据我会给你一个例子。再次太长了，所以我把它分成2:{“问题”：[{“id”：0，“title”：“Pi Dezimal”，“author”：“Timo”，“isMC”：false，“问题”：Wie lauten die 4 ersten Dezimalstellen von Pi？，“答案”：1415，“类别”：null}，{“id”：1，“标题：”Längster Fluss，“作者”：“Timo”，“isMC”：true，“问题：”Welcher ister der Längte Fluss der Welt？”，“答案”：[是的，现在检查我的答案，顺便说一句，你应该把这个细节添加到你的问题中！

const randomizedResult  = result.sort(() => Math.random() - 0.5)