Как остановить повторный рендеринг карты()? ⇐ IOS

[Anonymous]

У меня есть приложение, в котором я визуализирую миниатюры с помощью карты и заключаю их в объект, который ссылается на функцию, которая затем обрабатывает нажатие изображения. Проблема в том, что вместо 29 миниатюр, которые я сопоставил, при входе в представление я получаю 58 изображений. И все они дублируются, не имея никакой ценности.
Пример. Я нажимаю на первое изображение, и оно определяет, что это изображение с номером 0, а затем обрабатывает остальные.
Я нажимаю на изображение с номером 30, и оно определяет, что это изображение с номером 0, но ничего не делает.
Я попробовал взять эту часть и создать с ней новые дочерние компоненты с помощью React.memo, но в результате дубликаты изображений больше не имеют стиля исходных, поэтому вместо отображения в сетке они просто устраивают один под другой.
Вот мой код (я не включил абсолютно все, так как у меня есть другие части, которые не имеют отношения к делу):

Код: Выделить всё

function VideosScreen({ navigation }) {
const video = React.useRef(null);

<
const [videos, setVideos] = useState([]); -
const [modalVisible, setModalVisible] = useState(false);
const [youtubeLink, setYoutubeLink] = useState("");
> - from a different part but may be useful for context

const imageURL = [
require("../assets/images/video_thumbnails/w1.jpg"),
[..28 other thumbnails..]
];

const handleImagePress = (index) => {
navigation.navigate(
"IndividualVideo",
{ pathing: index },
{ imageIndex: index }
);
console.log(index, "in videos.js");
};

return (



{imageURL.map((imageURL, index) => (
handleImagePress(index)}>



[..]

const styles = StyleSheet.create({
[..]
container: {
marginTop: 20,
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "center",
rowGap: 10,
columnGap: 10,
fontFamily: "Avenir",
},
item: {
width: 384,
height: 216,
},

В чем проблема? Спасибо большое


Подробнее здесь: https://stackoverflow.com/questions/793 ... erendering