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

Question

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

我已经使用 .map 创建了每个组件，它可以工作我可以从结果中创建 Collapse headers。如果 JSON 的结果是 3，它会创建 3 个不同的 headers，但我的问题是内部组件，每次我按下 TouchableWithoutFeedBack，它都会呈现所有 Collapse Body 基于最后一次 Collapse Header 点击，但我只需要渲染与点击 Header 相关的 Collapse Body。

我有一个功能组件，它有一个请求来检索类别并填充折叠 Header，然后单击 Header 我需要根据 Header类别。

我该如何解决这个问题？如果有人能帮助我，我将不胜感激。

 {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

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

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

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

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

Answer 2

您似乎在使用某种状态对象。我假设您正在使用 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 地图。或者只是从 setAuditItems.

中删除 ...auditItems

这些有道理吗？

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

How to create an specific event foreach component created from array result - React Native

javascript

collapse

reactjs

react-native