React Native折叠列表内按钮如何关联对应用户条目实现资料编辑

你当前代码存在两个核心问题：

• 所有列表项的输入框修改都直接更新顶层state的同一份字段，不同用户的输入会互相覆盖
• 按钮渲染时虽然传了item.id，但输入值没有和id做绑定，点击时拿不到对应项的修改内容

按以下步骤修改即可： #

1. 调整state结构，按用户ID隔离编辑缓存 #

不要用全局单变量存所有输入框的值，新增按用户ID映射的编辑值缓存：

this.state = {
  datos: [], // 原有存储SQLite查询结果的列表
  editingProfileMap: {} // 格式：{ [用户ID]: { nombre: '', rutPersona: '', clave: '' } }
}

2. 修改列表项输入框的绑定逻辑 #

遍历渲染每个用户项时，输入框优先读当前ID对应的编辑缓存，没有缓存就读原始数据；修改时只更新当前ID对应缓存的内容，不会影响其他列表项。
修改后的CollapseBody部分代码：

<CollapseBody >
  <View key={item.id} >
    <Text>Nombre</Text>
    <TextInput 
      value={
        this.state.editingProfileMap[item.id]?.nombre ?? item.nombre
      }
      onChangeText={(val) => {
        this.setState(prev => ({
          editingProfileMap: {
            ...prev.editingProfileMap,
            [item.id]: {
              ...(prev.editingProfileMap[item.id] || item),
              nombre: val
            }
          }
        }))
      }}
    />

    <Text>Rut</Text>
    <TextInput 
      value={
        this.state.editingProfileMap[item.id]?.rutPersona ?? item.rutPersona
      }
      onChangeText={(val) => {
        this.setState(prev => ({
          editingProfileMap: {
            ...prev.editingProfileMap,
            [item.id]: {
              ...(prev.editingProfileMap[item.id] || item),
              rutPersona: val
            }
          }
        }))
      }}
    />

    <Text>Clave</Text>
    <TextInput 
      value={
        this.state.editingProfileMap[item.id]?.clave ?? item.clave
      }
      onChangeText={(val) => {
        this.setState(prev => ({
          editingProfileMap: {
            ...prev.editingProfileMap,
            [item.id]: {
              ...(prev.editingProfileMap[item.id] || item),
              clave: val
            }
          }
        }))
      }}
    />
    
    {this.renderEditButton(item.id)}
  </View> 
</CollapseBody>

3. 实现带ID绑定的按钮逻辑 #

按钮方法接收当前项的用户ID，点击时直接从编辑缓存里取对应ID的修改值，执行SQLite更新即可：

renderEditButton = (userId) => {
  const modifiedData = this.state.editingProfileMap[userId];
  // 没有修改内容时可以置灰按钮或者直接不显示
  if (!modifiedData) return null;

  return (
    <TouchableOpacity
      onPress={async () => {
        // 替换成你自己的SQLite更新逻辑
        // await db.runAsync(
        //   'UPDATE perfiles SET nombre=?, rutPersona=?, clave=? WHERE id=?',
        //   [modifiedData.nombre, modifiedData.rutPersona, modifiedData.clave, userId]
        // )
        // 更新完成后刷新列表，清空当前项的编辑缓存
        // const newList = await db.getAllAsync('SELECT * FROM perfiles')
        // this.setState(prev => ({
        //   datos: newList,
        //   editingProfileMap: {
        //     ...prev.editingProfileMap,
        //     [userId]: undefined
        //   }
        // }))
        alert(`ID为${userId}的用户信息更新成功`)
      }}
    >
      <Text>保存修改</Text>
    </TouchableOpacity>
  )
}

必改的结构问题 #

你现在在map循环里给每个折叠项单独套了一层ScrollView，外层又套了一层ScrollView，会出现嵌套滚动手势冲突、列表滚动卡顿的问题，直接删掉miLista里包裹Collapse的那层ScrollView即可，外层的ScrollView已经能满足整页滚动需求。
如果需要做「点击编辑按钮才允许输入」的交互，可以额外在state里加个currentEditingId字段，点击按钮时设为当前userId，TextInput的editable属性绑定this.state.currentEditingId === item.id，保存后把currentEditingId设为null即可。

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