React Native卡片编辑功能异常：文本未保存且批量触发编辑

你的问题核心是全局状态滥用和逻辑判断错误，导致编辑状态同步、修改内容丢失的问题，以下是针对性修复：

问题根源 #

1. 全局editMode状态导致所有卡片同步切换编辑状态，应该用每个卡片自身的edited字段独立控制
2. beginEditItem中item.id === item.id的判断恒为true，触发所有卡片进入编辑状态
3. endEditItem依赖全局editedText，但编辑时已实时更新data中的内容，该全局状态完全冗余

修改后的完整代码 #

状态定义 #

const [searchQuery, setSearchQuery] = useState('');
const [locked, setLocked] = useState(true);
// 初始化时为每个卡片添加独立的edited状态
const [data, setData] = useState(() => 
  serverData.map(item => ({ ...item, edited: false }))
);

处理函数 #

const handleLockPress = () => {
  setLocked(!locked);
};

const handleDeletePress = (itemId) => {
  setData(prev => prev.filter(dataItem => dataItem.id !== itemId));
};

const beginEditItem = (itemId) => {
  if (!locked) {
    setData(prev => prev.map(item => 
      item.id === itemId ? { ...item, edited: true } : item
    ));
  }
};

const endEditItem = (itemId) => {
  if (!locked) {
    setData(prev => prev.map(item => 
      item.id === itemId ? { ...item, edited: false } : item
    ));
  }
};

const handleTextChange = (itemId, text) => {
  setData(prev => prev.map(item => 
    item.id === itemId ? { ...item, textContent: text } : item
  ));
};

视图代码 #

<View style={styles.cardContainer}>
  {data.map((item) => (
    <Card key={item.id} style={styles.card} onPress={() => {}}>
      <BlurView intensity={3}>
        <View style={styles.cardContent}>
          <Card.Cover
            source={item.image}
            style={{
              width: item.imageWidth,
              height: item.imageHeight,
              margin: 16,
            }}
          />
          <View style={styles.textContainer}>
            {item.edited ? (
              <TextInput
                style={styles.textText}
                value={item.textContent}
                onChangeText={(text) => handleTextChange(item.id, text)}
                multiline
                autoFocus
              />
            ) : (
              <Caption style={styles.textText} editable={!locked}>
                {item.textContent}
              </Caption>
            )}
            <View style={styles.iconContainer}>
              <View style={{ flex: 0 }} />
              <View style={{ flex: 10, flexDirection: "row" }}>
                <IconButton 
                  icon={locked ? 'lock-outline' : 'lock-open-outline'} 
                  iconColor='white' 
                  onPress={handleLockPress} 
                />
                {!locked && (
                  <View style={styles.deleteEditContainer}>
                    <IconButton 
                      icon="delete" 
                      iconColor="white" 
                      onPress={() => handleDeletePress(item.id)} 
                    />
                    <IconButton 
                      icon={item.edited ? 'plus' : 'pencil'} 
                      iconColor="white" 
                      onPress={() => 
                        item.edited ? endEditItem(item.id) : beginEditItem(item.id)
                      } 
                    />
                  </View>
                )}
              </View>
            </View>
          </View>
        </View>
      </BlurView>
    </Card>
  ))}
</View>

关键修改说明 #

1. 移除全局编辑状态：用每个卡片自身的edited字段控制编辑状态，彻底解决“点击编辑所有卡片同步切换”的问题
2. 修复逻辑判断错误：将beginEditItem中错误的item.id === item.id改为item.id === itemId，仅标记目标卡片为编辑状态
3. 删除冗余全局状态：移除editedText和editMode，编辑时通过handleTextChange实时更新data中的内容，保存时直接使用data内的最新值
4. 优化状态更新方式：所有setData改用函数式更新，避免依赖外部状态快照，减少潜在bug

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