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

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

我使用.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>

       ))}

---

除非此行为特定于React native或Collpase库，但我要做的是在调用

onPress

时将当前打开的Collpase项设置为本地状态：

const[openedCollapseItemID，setOpenedCollapseItemID]=useState（“”）

然后检查渲染时是否打开了该文件：

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

{auditCategory.map（r=>(
...

您似乎在使用某种状态对象。我假设您使用的是

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>
))}

{auditItems[r.id]&&auditItems[r.id].map（r=>(
))}

如果您不想在下次单击时保存以前的值，只需创建另一个跟踪当前单击id的状态挂钩，并使用该挂钩有条件地显示

试听项

映射。或者只需从

设置试听项

中删除

…试听项

---

所有这些都有意义吗？

让auditItems成为一个对象，其中键是外部元素的id。然后你可以执行

auditItems[key].map

请您提供一些更详细的信息，说明我是如何做到这一点的？我还是从React开始。我希望我理解了您的问题。我将尝试在回答中详细说明。请参见下文。但问题是，即使知道打开了哪一个，它也会使用上次单击的项圈中的类别id呈现所有

pse头。我正在使用

const[auditItems，setAuditItems]=useState（[]）；

，我会按照你的建议做，谢谢。太棒了！让我们保持联系！当我将

setAuditItems（response.data）；

函数（response）中的setAuditItems（{…auditems，r.id:response.data}）更改为`setAuditItems（{…auditems，r.id:response.data}）时，`我收到一个错误，这是预期的'，”（逗号）而不是“.”如果我去掉“.”它接受为属性，但在渲染它的事件中，不会发生类似于它为空的情况。修复了我的答案。您需要切换到

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>
))}