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

【问题标题】：How to create an specific event foreach component created from array result - React Native如何为从数组结果创建的每个组件创建特定事件 - React Native
【发布时间】：2023-04-03 00:05:01
【问题描述】：

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

我已经使用 .map 创建了每个组件，我可以从结果中创建 折叠标题。如果 JSON 的结果是 3，它会创建 3 个不同的标题，但我的问题是内部组件，每次我按下 TouchableWithoutFeedBack 时，它都会根据最后一次 Collapse Header 单击呈现所有 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
    }
]

【问题讨论】：

使 auditItems 成为一个对象，其键为外部元素的 id。然后你可以做auditItems[key].map
请您提供一些更详细的信息来说明我该怎么做？我仍然从 React 开始。
希望我能理解您的问题。我将尝试在答案中详细说明。见下文

标签： javascript reactjs react-native collapse

【解决方案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 映射。或者只是从setAuditItems 中删除...auditItems。

这些都有意义吗？

【讨论】：

正好我用的是const [auditItems, setAuditItems] = useState([]);，我会尽量按照你的建议去做，谢谢。
太棒了！随时通知我们！
当我将函数(response) 中的setAuditItems(response.data); 更改为`setAuditItems({...auditItems, r.id: response.data})` 时出现错误，这是期待“，”（逗号）而不是“。”如果我去掉“。”它接受为属性，但是在渲染它的事件上，没有任何事情发生，就像它是空的一样。
修正了我的答案。您需要切换到setAuditItems({...auditItems, [r.id]: response.data})。对不起。我没注意。您必须在对象文字中使用方括号才能将变量的值用作键。
它适用于更新，非常感谢您的帮助和耐心的解释。

【解决方案2】：

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

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

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

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

【讨论】：

但问题是即使知道打开了哪个，它也会使用最后点击的Collapse Header中的类别ID呈现所有<AuditItem>。