React Native循环内更新状态变量，实现底部弹框展示对应点击的标题副标题

问题根因 #

现有写法存在两个核心问题导致无法实现需求：

• 你定义的全局titleText、subTitleText变量在forEach循环中会被持续覆盖，最终只会保留数组最后一项的内容，无法匹配不同的点击条目
• 没有使用响应式状态存储弹框展示内容，也没有建立点击条目和弹框内容的绑定关系

实现步骤 #

1. 定义响应式状态 #

在组件顶部引入useState，定义状态存储选中条目的标题和副标题：

import { useState } from 'react';

// 组件内部代码，保留你原有helpSheet的ref定义即可
const [selectedTitle, setSelectedTitle] = useState('');
const [selectedSubTitle, setSelectedSubTitle] = useState('');

2. 绑定标题点击事件 #

你在渲染tashlumExtraTitle数组对应的标题列表时，给每个条目包裹点击组件，点击时更新状态并唤起弹框：

// 渲染标题列表的位置，替换你原来的列表渲染逻辑
props.tashlumExtraTitle.map((textTitle, index) => {
  return (
    <TouchableOpacity 
      // 若条目有唯一id，优先用id作为key，性能更好
      key={index}
      onPress={() => {
        // 实时取当前点击条目的字段存入状态
        setSelectedTitle(textTitle["@TEUR"]);
        setSelectedSubTitle(textTitle["@SCHUM_HODSHI"] + "ש”ח");
        // 打开底部弹框
        helpSheet.current.open();
      }}
    >
      {/* 这里放置你原有的标题展示组件/文本 */}
      <Text>{textTitle["@TEUR"]}</Text>
    </TouchableOpacity>
  )
})

你之前写的forEach遍历赋值全局变量的代码可以直接删除，不需要提前遍历整个数组存储内容。

3. 修改RBSheet取值逻辑 #

将弹框内组件的取值替换为你定义的状态变量即可：

<RBSheet
  ref={helpSheet}
  closeOnDragDown={true}
  closeOnPressMask={true}
  height={hp(60)}
  customStyles={{
    wrapper: {
      backgroundColor: "rgba(52,52,52,0.8)",
    },
    draggableIcon: {
      backgroundColor: "#d3d6dc",
    },
    container: {
      borderRadius: 15,
    },
  }}
>
  <Container>
    <HelpComponentContainer
      title={selectedTitle}
      subTitle={selectedSubTitle}
    />
  </Container>
</RBSheet>

内容的提问来源于stack exchange，提问作者Chinmayee