Reactjs 使用react导航屏幕将数据输入屏幕的最佳方式。使用钩子时出错

我有一个从products数组渲染的产品的基本平面列表。我正在使用react navigation导航到产品详细信息屏幕，但我正在尝试找到获取活动选定产品的最佳方法，以便在产品详细信息页面中显示产品信息

我的方法：我认为只需使用一个钩子来提供活动产品，我尝试过，但由于某些原因，我没有得到产品详细信息页面中提供的正确状态

获取错误：“TypeError:null不是对象（评估'product.title'）”

顺便说一句，现在我正在努力避免使用redux，因为我的学校项目明天就要到期了，我还试图学习挂钩

编辑：嗯，我明白了，现在我也可以使用路由参数。我想我还是很想了解我目前的hooks方法是怎么回事

产品卡组件

import React, { useState, useEffect } from "react";

import {
  View,
  ImageBackground,
  Text,
  Pressable,
  StyleSheet,
  Button,
  Dimensions,
  ScrollView,
  RefreshControl,
  SafeAreaView,
  Image,
  FlatList,
  TouchableOpacity,
} from "react-native";

import { useQuery, gql } from "@apollo/client";

import Amplify, { Auth } from "aws-amplify";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { useNavigation, NavigationContainer } from "@react-navigation/native";
import useProduct from "../hooks/useProduct";

function ProductCard({ item }) {
  const navigation = useNavigation();
  const { setActiveProduct } = useProduct();

  const imgUrl = "http://192.168.1.252:3000" + item.media[0].URLs.thumbnail;
  const imgUrl2 = imgUrl.replace("thumbnail", "large");

  return (
    <TouchableOpacity
      style={styles.buttonContainer}
      onPress={() => {
        setActiveProduct(item);

        navigation.navigate("Product Detail");
      }}
    >
      <View style={styles.view}>
        <Image
          style={styles.productImage}
          source={{
            uri: imgUrl2,
          }}
        />
      </View>
    </TouchableOpacity>
  );
}

export default ProductCard;

const styles = StyleSheet.create({
  buttonContainer: {
    flex: 0.5,
    margin: 5,
    backgroundColor: "white",
  },
  view: {
    flex: 1,

    display: "flex",
    flexDirection: "column",
    height: 200,
  },

  productImage: {
    width: "100%",
    height: "70%",
  },
  description: {
    width: "100%",
    height: "60%",
  },
});

---

useProduct（）

向两个组件返回单独的状态对象。尝试在

ProductCard

内部使用

product

。您将在

ProductCard

组件中看到更新的

product

。但是此

产品

与返回到

ProductDetailScreen

的产品不同。两个组件都有单独的状态对象。

在ProductDetailPage

中，如果（！product）

将在产品初始化之前返回

product.title

。很抱歉，我试图理解您的评论。所以ProductCard不需要这个产品。useProduct挂钩的唯一用途是知道单击了哪个产品。所以在产品卡中，还没有点击任何东西，所以我们当时没有产品。我现在正在使用routes params，它工作得很好，但我只是试图理解挂钩，并试图了解为什么这种方法不起作用。简单地说，useProduct将两个不同的对象返回到两个组件。如果希望在两个（或多个）组件之间共享数据，则可以改用上下文。

import React, { useState, useEffect } from "react";

import {
  View,
  ImageBackground,
  Text,
  Pressable,
  StyleSheet,
  Button,
  Dimensions,
  ScrollView,
  RefreshControl,
  SafeAreaView,
  Image,
  FlatList,
  TouchableOpacity,
} from "react-native";

import useProduct from "../../hooks/useProduct";

function ProductDetailScreen() {
  const { product } = useProduct();

  if (!product) {
    return (
      <View>
        <Text>{product.title}</Text>
      </View>
    );
  }
  return (
    <View>
      <Text>{product.title}</Text>
    </View>
  );
}

export default ProductDetailScreen;

import React, { useState } from "react";

function useProduct() {
  const [product, setProduct] = useState(null);

  setActiveProduct = (newProduct) => {
    setProduct(newProduct);
  };

  return { product, setActiveProduct };
}

export default useProduct;