如何为根据数组结果创建的每个组件创建特定事件-React Native

Question

大家好，我又回来了。我想为从JSON响应的结果创建的每个组件创建特定事件。

我已经使用.map创建了每个组件，它的工作原理是我可以从结果中创建折叠标题。如果JSON的结果为3，则会创建3个不同的标头，但是我的问题是内部的组件，每当我按下TouchableWithoutFeedBack时，它都会根据最后一次折叠标头单击来呈现所有Collapse Body，但是我需要仅渲染与单击的标题相关的折叠主体。

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

我该如何解决？如果有人可以帮助我，我将非常感激。

 {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

除非此行为特定于React本机或Collpase的库，但是当调用onPress时，我要做的是将当前打开的Collpase项目设置为本地状态：

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

然后检查渲染时是否已打开它：

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