如何创建从数组结果反应本机创建的特定事件预测组件

Question

大家好，我又来了。我想要创建一个从JSON响应的结果中创建的特定的event组件。

我使用.map创建了每个组件，它可以工作，我可以根据结果创建折叠头。如果JSON的结果是3，它会创建3个不同的头，但我的问题是组件在内部，每次我按TouchableWithoutFeedBack时，它都会根据最后一次折叠头单击呈现所有折叠正文，但是我只需要呈现与单击的头部相关的折叠体。

我有一个功能组件，它请求检索类别并填充折叠头，然后在单击标头时，我需要根据报头类别填充自定义组件。

我怎么才能解决这个问题？如果有人能帮我，我会很感激的。

 {auditCategory.map(r =>(

            <Collapse>

                <CollapseHeader key={r.id} >
                <TouchableWithoutFeedback onPress={()=> {
                // console.log("TESTE:"+r.id) 
                axios.get("http://10.113.16.113:8081/api/audititem/findbycategorycheckl?checklistid="+checklistid+"&categoryid="+r.id,{                        
                }).then
                (function (response){
                    setAuditItems(response.data);
                 //   console.log(response.data);      
                }).catch(error => {
                    console.log(error);
                })
                    }}>
                 <View style={styles.collapHead}>


                 <Text style={styles.collapHeadInput} >{r.categorY_DESCRIPTION} </Text>

                  </View> 
                  </TouchableWithoutFeedback>
                </CollapseHeader>                
                <CollapseBody>
                 <ScrollView horizontal={true}>

                        {auditItems.map(r =>(
                            <AuditItem key={r.id} title={r.subcategorY_DESCRIPTION}  od={r.od}></AuditItem>
                           ))}

                </ScrollView>
                </CollapseBody>
            </Collapse>

       ))}

这是来自axios.get的响应：

[
    {
        "id": 3,
        "subcategorY_DESCRIPTION": " Test 1 SubCategory",
        "checklisT_ID": 1,
        "auditcategorY_ID": 2,
        "od": 300,
        "creatioN_DATETIME": "2020-03-06T00:00:00",
        "status": true,
        "locatioN_ID": 1,
        "shoW_SCANCODE": true,
        "shoW_CAPTUREPHOTO": true,
        "shoW_COMMENTS": true
    },
    {
        "id": 9,
        "subcategorY_DESCRIPTION": "Test 2",
        "checklisT_ID": 1,
        "auditcategorY_ID": 2,
        "od": 10,
        "creatioN_DATETIME": "2020-04-06T00:00:00",
        "status": true,
        "locatioN_ID": 1,
        "shoW_SCANCODE": true,
        "shoW_CAPTUREPHOTO": true,
        "shoW_COMMENTS": true
    }
]

Answer 1

你似乎在使用某种状态对象。我假设您使用的是useState钩子，类似于const [auditItems, setAuditItems] = useState('')。

我建议你用一个空的对象开始。所以：const [auditItems, setAuditItems] = useState({})

然后，当检索希望设置为auditItems的值时，可以将其设置为已经存在的对象的属性。就像这样：setAuditItems({...auditItems, [r.id]: response.data})，那么您可以在呈现项时检查密钥是否存在：

{auditItems[r.id] && auditItems[r.id].map(r =>(
    <AuditItem key={r.id} title={r.subcategorY_DESCRIPTION}  od={r.od}></AuditItem>
))}

如果您不想在下一次单击时保存前面的值，您可以简单地制作另一个状态钩子来跟踪当前单击的id，并使用它有条件地显示auditItems映射。或者将...auditItems从setAuditItems中删除。

这些都有意义吗？

Answer 2

除非此行为特定于响应本机或胶原酶库，但当调用onPress时，我要做的是将当前打开的拼贴酶项设置为本地状态：

const [openedCollapseItemID, setOpenedCollapseItemID] = useState('')

然后在呈现时检查这是否是打开的：

 {auditCategory.map(r => (
     <Collapse isCollapsed={r.id === openedCollapseItemID} >
...
     </Collapse>