Question

我是编码世界的新手。学习react和json。我正在研究链接在一起的三个不同的面板。我想在第三个面板上显示清单答案。

第一小组：
显示：所有esn（“ 4667”，“ 4668”）
onclick在第一个esn：“ 4667”上，它将在第二个面板上显示所有esn：“ 4667”的gmtdatetime。
第二个面板：
显示：esn的所有gmtdatetime：“ 4667”（'2018-08-31 03:22:16'，'2018-08-30 03:12:16'）
onclick在第一个gmtdatetime'2018-08-31 03:22:16'上，它应该在该gmtdatetime'2018-08-31 03:22:16'的第三个面板上显示问题+答案。
第三小组：
它应以这种格式显示第一个gmtdatetime的所有值（问题+ answer）。我要显示是或否，而不是是或否。
问题答案
问题1是==“是”
问题2是==“是”
问题3否==“否”
问题4是==“是”

原始代码：react-editor

输出

  onClick on ESN ("4667") =>
                          onClick Date & Time ("2018-08-31 03:22:16") =>  
                                               Checklist (Question + Answer)
                                              "question 1"  true == "YES"
                                              "question 2"  true == "YES"
                                              "question 3"  false == "NO"
                                              "question 4"  true == "NO"

我的json数据如下所示

    [
    {
        esn: '4667',
        completed_checklists: [
            {
                gmtdatetime: '2018-08-31 03:22:16',
                answers: ['true','true','false','true']
            },
            {
                gmtdatetime: '2018-08-30 03:12:16',
                answers: ['false','true','true','true']
            }
        ],
        question: ['question 1','question 2','question 3','question 4']
    },
    {
        esn: '4668',
        completed_checklists: [
            {
                gmtdatetime: '2017-08-31 03:22:16',
                answers: ['true','false','false','true']
            },
            {
                gmtdatetime: '2017-08-31 03:23:16',
                answers: ['true','false','false','true']
            }
        ],
        question: ['question 1','question 2','question 3','question 4']

    },

]

问题提取第二个面板和第三个面板上的所有数据。

谢谢

Answer 1

您好，我在这里整理您的代码，我想这就是您在here之后的样子

Answer 2

此答案显示了完整的解决方案，其中包含true == YES和false == NO：

https://stackblitz.com/edit/react-wej2w1

React onClick listItem显示来自JSON

2 个答案: