如何访问多个 javascript 对象？答案

【问题标题】：How to access multiple javascript objects?如何访问多个 javascript 对象？
【发布时间】：2019-04-11 10:11:48
【问题描述】：

在我的 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 中运行另一个循环吗？或者也许是 beforeEach？

我必须提到的另一件事是我试图在 render(){//here 之后访问它}

【问题讨论】：

听起来你想要嵌套循环，一个在questionsAnswers之上，另一个在options之上。不要使用.forEach。我推荐map 或for … of。
我只想说，您永远不应该将硬编码数据放入state。 state 这个词意味着它会发生变化，这正是测验问题和答案永远不会发生的事情。此外，answer 字段应包含存储正确答案的选项数组的索引。
嵌套循环是一种方式，另一种是创建一个问题组件并将options作为道具传递，然后在组件的render()中使用第二个循环来呈现选项。

标签： javascript arrays reactjs dictionary

【解决方案1】：

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

是的，你可以！您可以通过选项映射问题和映射，返回 div。

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

【讨论】：