React Native复用组件中复选框状态独立问题解决求助

问题核心 #

你遇到的问题本质是模态框的复选框状态没有和当前操作的卡片绑定，所有卡片共用了同一套状态变量，导致切换卡片时，状态没有同步更新为当前卡片的已选内容。

具体解决方案 #

1. 给每个卡片维护独立的选中状态

用一个对象来存储所有卡片的选中数据，键可以用页面名-卡片索引这种唯一标识，值是该卡片对应的选中项数组：

import { useState } from 'react';
import { Checkbox, Modal, Button } from 'react-native-paper';

const YourComponent = () => {
  // 存储所有卡片的选中状态：key为卡片唯一标识，value为选中项数组
  const [cardSelectedItems, setCardSelectedItems] = useState({});
  // 模态框显示状态
  const [modalVisible, setModalVisible] = useState(false);
  // 当前打开模态框的卡片标识
  const [currentCardKey, setCurrentCardKey] = useState('');
  // 模态框临时选中状态（仅用于当前打开的卡片）
  const [modalSelectedItems, setModalSelectedItems] = useState([]);

2. 打开模态框时加载当前卡片的已选状态

打开模态框时，传入当前卡片的页面名和索引，生成唯一标识，然后从存储中取出该卡片的已选内容，同步到模态框的临时状态：

// 打开模态框的函数，接收当前卡片的页面名和索引
  const openModal = (pageName, cardIndex) => {
    const key = `${pageName}-${cardIndex}`;
    setCurrentCardKey(key);
    // 取出该卡片已选内容，没有则设为空数组
    setModalSelectedItems(cardSelectedItems[key] || []);
    setModalVisible(true);
  };

3. 关闭模态框时保存当前卡片的选中状态

关闭模态框时，把模态框的临时选中状态保存到对应卡片的存储中，而不是清空状态：

const closeModal = () => {
    // 将当前模态框的选中状态保存到对应卡片的存储
    setCardSelectedItems(prev => ({
      ...prev,
      [currentCardKey]: modalSelectedItems
    }));
    setModalVisible(false);
  };

4. 绑定Checkbox.Item的status属性

根据模态框的临时状态，判断每个选项的选中状态：

// 示例复选框选项列表
  const options = [
    { id: 'video1', label: '视频缩略图1' },
    { id: 'video2', label: '视频缩略图2' },
    { id: 'video3', label: '视频缩略图3' },
  ];

  return (
    // 你的页面和卡片渲染逻辑，比如Yellow页面的第0个卡片打开模态框：
    <Button onPress={() => openModal('Yellow', 0)}>打开模态框</Button>

    <Modal visible={modalVisible} onDismiss={closeModal}>
      {options.map(option => (
        <Checkbox.Item
          key={option.id}
          label={option.label}
          // 根据模态框临时状态判断选中状态
          status={modalSelectedItems.includes(option.id) ? 'checked' : 'unchecked'}
          onPress={() => {
            // 更新模态框临时选中状态
            setModalSelectedItems(prev => 
              prev.includes(option.id)
                ? prev.filter(item => item !== option.id)
                : [...prev, option.id]
            );
          }}
        />
      ))}
      <Button onPress={closeModal}>确认并关闭</Button>
    </Modal>
  );
};

export default YourComponent;

为什么之前的清除状态没生效？ #

你之前尝试关闭模态框时清除状态，但这会导致所有卡片的选中状态都被清空，而且下次打开新卡片时，没有加载该卡片自己的历史选中状态，所以还是会残留上一次的状态。现在的方案让每个卡片拥有独立的状态存储，打开时加载对应卡片的已选内容，从根源上解决了状态混乱的问题。

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