呈现特定的 javascript 对象答案

【问题标题】：Rendering a specific javascript object呈现特定的 javascript 对象
【发布时间】：2021-11-25 20:05:40
【问题描述】：

{
    questionText: 'What is 4 + 5?',
    answerOptions: [
        { answerText: '14', isCorrect: false },
        { answerText: '9', isCorrect: true },
        { answerText: '11', isCorrect: false },
        { answerText: '20', isCorrect: false },
    ],
},

我有这个 javascript 对象。如何呈现正确的选项，在本例中为“9”？

{
  questions.map((answerOption) =>
    answerOption.answerOptions.isCorrect ? (
      <div>{answerOption.answerOptions.answerText}</div>
    ) : null,
  );
}

我试过这个，但它没有给我任何输出。

【问题讨论】：

questions 是一个包含多个对象的数组吗？如果没有更多细节，人们只能猜测您正在使用的到底是什么。请花几分钟时间阅读minimal reproducible example

标签： javascript reactjs javascript-objects

【解决方案1】：

由于你不写，我猜你的对象叫questions。

如果数组中只有一个对象（如您发布的示例中），则必须执行以下操作：

{
  questions.answerOptions.map((answerOption) => 
     answerOption.isCorrect ? <div>{answerOption.answerText}</div> : null)
}

否则，如果数组中有多个对象，则可以将两个map 一个放在另一个中：

{
  questions.map((answerOption) => 
      answerOption.answerOptions.map(el =>
         el.isCorrect ? <div>{el.answerText}</div> : null)
      )
}

【讨论】：

【解决方案2】：

我认为你追求的是这样的：

{questions.answerOptions.filter(option=>option.isCorrect).map(answer=><div>answer.answerText</div>)}

【讨论】：

我对此表示赞成，因为它在技术上确实显示了正确的答案。但这是一种非常繁琐的方法。我认为我们可以不使用过滤器，只需执行以下操作：{questions.answerOptions.map(answer=> answer.isCorrect ? <div>answer.answerText</div> : null)}

【解决方案3】：

您的answerOptions 是一个数组，因此您还需要对其进行迭代。可以使用Array#find()方法查找isCorrect为true的元素：

function App() {
  let questions = [
    {
      questionText: 'What is 4 + 5?',
      answerOptions: [
        { answerText: '14', isCorrect: false },
        { answerText: '9', isCorrect: true },
        { answerText: '11', isCorrect: false },
        { answerText: '20', isCorrect: false },
      ],
    }
  ];

  return (
    <div>
      {questions.map((question) => {
        let answer = question.answerOptions.find((i) => i.isCorrect);
        if (!answer) {
          console.log('Ooops, no way');
        }
        return (
          <p>
            The correct answer for "{question.questionText}" is <b>{answer.answerText}</b>
          </p>
        );
      })}
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>

【讨论】：