React listItem从JSON显示所选listItem的数据

Question

我对编码世界很陌生。学习的反应和强生。我正在工作的三个不同的小组是联系在一起的。我想在第三个面板上显示清单答案。

第一个面板：

显示:所有esn ("4667"，"4668")

点击第一个esn:"4667“，它应该在第二个面板上显示esn的所有gmtdatetime：”4667“。

第二面板：

显示:esn的所有gmtdatetime：“4667”('2018-08-31 03:22:16'，'2018-08-30 03:12:16')

点击第一个gmtdatetime '2018-08-31 03:22:16‘它应该在该gmtdatetime '2018-08-31 03:22:16’的第三个面板上显示问题+答案。

第三面板：

它应该以这种格式显示第一个gmtdatetime的所有值(问题+答案)。我想显示是或不是，而不是正确或错误。

问题回答

问题1.真正的==“是”

问题2.真正的==“是”

问题3假==“否”

问题4.真正的==“是”

原始代码： 反应编辑器

输出

  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

你好，我有分叉你的代码，我想这就是你想要的这里

Answer 2

这个答案展示了一个完整的解决方案，使用true == YES和false == NO

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