Question

在我的ReactJs中，设置以下状态：

this.state = {
questionsAnswer: [
        { // first question
          question: 'A simple question: ',
          options: [ 'Answer1', 'Answer2', 'Answer3'],
          answer: 'Answer3',
        },
        { // second question
          question: 'Second Simple Question',
          options: ['Answer1', 'Answer2'],
          answer: 'Answer1'
        }]}

这是一个类似测验的应用程序，用于检查您的答案。我的问题是我根据“选项”的长度来渲染元素。为了简单起见，将该元素设为div。当我渲染问题1时，将渲染三个div；在问题2中，将渲染两个div。

我遇到的问题是，我无法动态访问对象状态的内部元素，因此无法渲染DIV的数量。例如，我们可以执行this.state.questionsAnswer [0] .options.length来访问第一个元素的长度，并更改索引以获取第二个元素。

根据选项的长度呈现元素的最佳方法是什么？

我尝试的是：

for (let i = 0; i < this.state
                              .questionsAnswer[0]
                              .options
                              .length; i++) { //// render div here }

我应该在questionsAnswer中运行另一个循环吗？还是以前的？

我必须提到的另一件事是，我正在尝试在render（）{// here}

之后访问它

Answer 1

我遇到的问题是我无法动态访问对象状态的内部元素，因此无法呈现DIV的数量。

可以！您可以在问题中进行映射，并在选项中进行映射，并返回div。

this.state.questionsAnswer.map(question => {
  return question.options.map(option => {
    <div>stuff</div>
  })
})

如何访问多个JavaScript对象？

1 个答案: