在 Flatlist 项目中单击 onpress 时道具值会发生变化

Question

Props 值在 FlatList Item 的 onpress() 事件中发生变化。我正在传递一个数组，但该数组再次自动嵌套到一个数组中，导致同一项目的第二次 onpress 事件出现问题。

以下为首次印刷数据：

Object {
  "content": "Data",
  "date": "2022-06-04",
  "image": "url",
  "link": "url",
  "pubdate": "2022-06-04T20:00:33.639242+05:30",
  "source": "abc",
  "time": "20:00:33",
  "title": "abc",
}

以下为第二次onpress数据：

Object {
"item":Object {
  "content": "Data",
  "date": "2022-06-04",
  "image": "url",
  "link": "url",
  "pubdate": "2022-06-04T20:00:33.639242+05:30",
  "source": "abc",
  "time": "20:00:33",
  "title": "abc",
},
}

下面是具有 onpress 事件的 FlatList 视图：

import React, { useState } from "react";
import { StyleSheet, View, Dimensions, Text, Modal, Share } from "react-native";
import { Icon, Tile } from "react-native-elements";
import {
  Avatar,
  Button,
  Card,
  Title,
  Paragraph,
  Subheading,
  Caption,
} from "react-native-paper";
import moment from "moment";
import { WebView } from "react-native-webview";
import { ActivityIndicator } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

// import { Container } from './styles';

const { width } = Dimensions.get("window");
const { webViewHeight } = Dimensions.get("window").height - 56;

const BlockCard = ({ navigation, item }) => {
  const { image, title, source, date, time, link } = item;
  const momentsago = moment(date + " " + time, "YYYY/MM/DD HH:mm:ss").fromNow();
  const source2 = source + " | " + momentsago;
  return (
    <View style={styles.centeredView}>
      <Card>
        <Card.Cover source={{ uri: image }} />
        <Card.Content>
          {/* <Subheading style={{fontWeight:"bold"}}>{title}</Subheading> */}
          <Title>{title}</Title>
          <Caption style={{ fontWeight: "bold" }}>{source2}</Caption>
        </Card.Content>
        <Card.Actions style={{ alignSelf: "flex-end" }}>
          <Button icon="share-variant" color="#E1B72E">
            Share
          </Button>
          <Button
            icon="open-in-new"
            color="#E1B72E"
            onPress={() => navigation.navigate("Details", (item = { item }))}
          >
            Explore
          </Button>
        </Card.Actions>
      </Card>
    </View>
  );
};

下面是详细信息屏幕：

const Details = ({ navigation, route }) => {
  var { image, title, source, date, time, link, pubdate, content } =
    route.params.item;
  var momentsago = moment(date + " " + time, "YYYY/MM/DD HH:mm:ss").fromNow();
  var source2 = source + " | " + momentsago;

  useEffect(() => {
    console.log(route.params.item);
  });

Console.log 捕获了数据中的差异。请给我任何指示，因为我是 React Native 的新手。

Answer 1

我认为嵌套发生在这里：

 <Button
            icon="open-in-new"
            color="#E1B72E"
            onPress={() => navigation.navigate("Details", (item = { item }))}
          >
            Explore
          </Button>

尝试这样做

 <Button
            icon="open-in-new"
            color="#E1B72E"
            onPress={() => navigation.navigate("Details",item)}
          >
            Explore
          </Button>

在 Flatlist 项目中单击 onpress 时道具值会发生变化

Props values changes when clicked onpress within a Flatlist item

javascript

reactjs

react-native