هوية FlatList والاختيار ذو العمر الواضح

import {useState} from 'react';
import {FlatList, Pressable, Text} from 'react-native';
const workshops = [{id: 'w-7', title: 'Maps'}, {id: 'w-9', title: 'Rivers'}];
export default function App() {
  const [selected, setSelected] = useState([]);
  return <FlatList data={workshops} extraData={selected}
    keyExtractor={item => item.id}
    renderItem={({item}) => <Pressable accessibilityRole="button"
      accessibilityState={{selected: selected.includes(item.id)}}
      onPress={() => setSelected(previous => previous.includes(item.id)
        ? previous.filter(id => id !== item.id) : [...previous, item.id])}>
      <Text>{item.title}{selected.includes(item.id) ? ' selected' : ''}</Text>
    </Pressable>} />;
}

Initially Maps and Rivers; selecting w-7 predicts Maps selected while Rivers stays unchanged.

يملك المستوى فوق الصفوف الاختيار بمعرّف السجل. ويجعل extraData اعتماد العرض الخارجي صريحا.

function retainVisibleSelection(selected, rows) {
  const visible = new Set(rows.map(row => row.id));
  return selected.filter(id => visible.has(id));
}
const before = ['w-7', 'w-9'];
const after = retainVisibleSelection(before, [{id: 'w-9'}, {id: 'w-11'}]);
console.log(JSON.stringify(after));
console.log(JSON.stringify(before));

["w-9"]
["w-7","w-9"]

تبقى w-9 فقط بسياسة الصفحة المحلية. ولا تتغير اللقطة الأصلية أو يعاد تفسير سجل بموضعه.