渲染特定的 javascript 对象

Question

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

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

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

Answer 2

我想你正在寻找这样的东西：

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

Answer 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>

渲染特定的 javascript 对象

Rendering a specific javascript object

javascript

javascript-objects

reactjs