Javascript 在react native中按onPress将数据保存到异步存储

我试图在每次用户单击某个按钮时将数据保存到异步存储中，然后将保存的数据显示在我可以导航到的seprate屏幕上，我发现有一个示例执行相同的操作，但使用类组件，我开始只使用功能组件学习react native，所以我不知道在这种情况下如何从类组件过渡到功能组件

使用的代码：屏幕进行保存

import React from "react";
import { StyleSheet, Text, View, Dimensions, Image } from "react-native";
import { SharedElement } from "react-native-shared-element";
import { TouchableOpacity, ScrollView } from "react-native-gesture-handler";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { Entypo } from "@expo/vector-icons";
import { FontAwesome } from "@expo/vector-icons";
import colors from "../config/colors";
import { SaveItem, ReadItem } from "../components/DbHelper";
const DetailScreen = (props) => {
  state = {       ####### getting an error on state 
    items: props.route.params,
    saved: [],
  };
  onSave = (item) => {
    const { saved } = this.state;
    const newItems = [...saved, item];

    this.setState({
      saved: newItems,
    });

    const items = JSON.stringify(newItems);

    SaveItem("saved", items)
      .then((res) => {
        console.warn("saved", res);
      })
      .catch((e) => console.warn(e));
  };
  goToDetails = () => {
    this.setState({
      saved: [],
    });

    this.props.navigation.navigate("SaveScreen");
  };
  const { width, height } = Dimensions.get("window");
  const { data } = props.route.params;

  return (
    <View style={styles.container}>
      <View>
        <SharedElement id={`item.${data.id}.photo`}>
          <Image
            resizeMode="cover"
            source={{ uri: data.img }}
            style={{
              width: 400,
              height: 300,
              borderBottomLeftRadius: 50,
              //borderBottomRightRadius: 50,
            }}
          />
        </SharedElement>
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            position: "absolute",
            bottom: 14,
            left: 10,
          }}
        >
          <SharedElement id={`item.${data.id}.profilePic`}>
            <Image
              resizeMode="cover"
              source={{ uri: data.image }}
              style={{
                width: 60,
                height: 60,
                borderRadius: 10,
                marginRight: 14,
              }}
            />
          </SharedElement>
          <View
            style={{
              flex: 1,
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <SharedElement id={`item.${data.id}.profilePic`}>
              <Image
                resizeMode="cover"
                source={{
                  uri:
                    "https://fertility.womenandinfants.org/app/uploads/photo-huff-post-logo.png",
                }}
                style={styles.blogProfilePic}
              />
            </SharedElement>
            <View>
              <SharedElement id={`item.${data.id}.username`}>
                <Text
                  style={{ color: "white", fontSize: 16, fontWeight: "bold" }}
                >
                  {data.username}
                </Text>
              </SharedElement>
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <SharedElement id={`item.${data.id}.username`}>
                  {data.author != null ? (
                    <Text style={styles.blogUsername}>{data.author}</Text>
                  ) : (
                    <Text style={styles.blogUsername}>Anonymous author</Text>
                  )}
                </SharedElement>

                <SharedElement id={`item.${data.id}.readtime`}>
                  <View style={{ bottom: 5 }}>
                    <Entypo
                      name="time-slot"
                      size={20}
                      color={colors.shade2}
                      style={{ top: 84, right: 210 }}
                    />
                    <Text style={styles.readtime}>
                      {data.content.length / 10}min
                    </Text>
                  </View>
                </SharedElement>
              </View>
            </View>

            <View style={{ right: 20 }}>
              <TouchableOpacity
                onPress={() => {
                  this.onSave(item);
                }}
              >
                <MaterialCommunityIcons
                  name="bookmark"
                  size={35}
                  color={colors.shade2}
                />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={this.goToDetails}
                style={styles.button}
              >
                <Text style={styles.save}>View Saved</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <SharedElement id={`item.${data.id}.readtime`}>
          <Text
            style={{
              color: "white",
              fontSize: 14,
              borderColor: "red",
              borderRadius: 10,
              top: 45,
              left: 280,
            }}
          >
            {data.category}
          </Text>
        </SharedElement>
      </View>
      <ScrollView style={{ paddingHorizontal: 10, paddingTop: 14 }}>
        <SharedElement
          id={`item.${data.id}.text`}
          style={{ width: width - 30, marginBottom: 14 }}
        >
          <Text
            style={{
              fontSize: 26,
              fontWeight: "bold",
              lineHeight: 32,
              color: "#FFFFFF",
              top: 50,
            }}
          >
            {data.title}
          </Text>
        </SharedElement>
        <Text
          style={{
            fontSize: 16,
            lineHeight: 28,
            textAlign: "justify",
            opacity: 0.5,
            color: "#CDCFDE",
            top: 50,
          }}
        >
          {data.content}
        </Text>

        <View
          style={{
            marginVertical: 25,
            paddingBottom: 20,
            flex: 1,
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <TouchableOpacity
            style={{ flexDirection: "row", padding: 12, alignItems: "center" }}
          >
            {/*      <Feather name="heart" size={16} color="orange" />
            <Text style={{ marginHorizontal: 10 }}>3.4k Likes</Text>*/}
          </TouchableOpacity>
        </View>
      </ScrollView>
      <View style={{ position: "absolute", top: 40, left: 10 }}>
        <TouchableOpacity onPress={() => props.navigation.goBack()}>
          <FontAwesome name="arrow-circle-left" size={30} color="white" />
        </TouchableOpacity>
      </View>
    </View>
  );
};

});
export default DetailScreen;

很抱歉代码太长，我试图包含所有部分以更好地理解问题。

您正在非类组件上使用此代码

而不是声明您应该使用的状态 您需要删除所有这些事件才能正确使用挂钩

const DetailScreen = (props) => {
 const [items, setItems] = useState(props.route.params)
 const [saved, setSaved] = useState([])

 onSave = (item) => {
  // do this
  const newItems = [...saved, item]
  setSaved(newItems)
  // or, better, this
  setSaved(prev => [...prev, item])
  // ...

您正在非类组件上使用此

而不是声明您应该使用的状态 您需要删除所有这些事件才能正确使用挂钩

const DetailScreen = (props) => {
 const [items, setItems] = useState(props.route.params)
 const [saved, setSaved] = useState([])

 onSave = (item) => {
  // do this
  const newItems = [...saved, item]
  setSaved(newItems)
  // or, better, this
  setSaved(prev => [...prev, item])
  // ...

---

我建议您阅读react和react本机文档，以帮助您了解如何使用类和功能组件。这一点很重要，因为它将有助于了解事情的原因和方式

现在我们来看一下您的代码，为了让代码正常工作，您需要解决三件事：

要访问功能组件中的状态，必须使用hookse.g useState。 此属性在功能组件中不可用。 声明您的函数。 更新您的代码

import React, {useState} from 'react';

const DetailScreen = (props) => {
const [saved, setSaved] =useState([]);
const [items, setItems] = useState(props.route.params)

const onSave = (item) => {
    const newItems = [...saved, item];

    setSaved(newItems);

    const items = JSON.stringify(newItems);

    SaveItem("saved", items)
      .then((res) => {
        console.warn("saved", res);
      })
      .catch((e) => console.warn(e));
  };
  const goToDetails = () => {
    setSaved([]);
    props.navigation.navigate("SaveScreen");
  };
  const { width, height } = Dimensions.get("window");
  const { data } = props.route.params;

反应：

---

React Native:

我建议您阅读React和React Native文档，以帮助您了解如何使用类和功能组件。这一点很重要，因为它将有助于了解事情的原因和方式

现在我们来看一下您的代码，为了让代码正常工作，您需要解决三件事：

要访问功能组件中的状态，必须使用hookse.g useState。 此属性在功能组件中不可用。 声明您的函数。 更新您的代码

import React, {useState} from 'react';

const DetailScreen = (props) => {
const [saved, setSaved] =useState([]);
const [items, setItems] = useState(props.route.params)

const onSave = (item) => {
    const newItems = [...saved, item];

    setSaved(newItems);

    const items = JSON.stringify(newItems);

    SaveItem("saved", items)
      .then((res) => {
        console.warn("saved", res);
      })
      .catch((e) => console.warn(e));
  };
  const goToDetails = () => {
    setSaved([]);
    props.navigation.navigate("SaveScreen");
  };
  const { width, height } = Dimensions.get("window");
  const { data } = props.route.params;

反应：

---

React Native:

您需要使用useState将基于类的状态代码转换为基于钩子的方法

例如，您的类方法将如下所示：

  const [items,setItems] = useState(props.route.params);
  const [saved,setSaved] = useState([]);
  onSave = (item) => {
    const newItems = [...saved, item];

    setSaved(newItems);

    const items = JSON.stringify(newItems);

    SaveItem("saved", items)
      .then((res) => {
        console.warn("saved", res);
      })
      .catch((e) => console.warn(e));
  };

  goToDetails = () => {
    setSaved([]);
    props.navigation.navigate("SaveScreen");
  };

---

有关更多信息，请参见：

您需要使用useState将基于类的状态代码转换为基于钩子的方法

例如，您的类方法将如下所示：

  const [items,setItems] = useState(props.route.params);
  const [saved,setSaved] = useState([]);
  onSave = (item) => {
    const newItems = [...saved, item];

    setSaved(newItems);

    const items = JSON.stringify(newItems);

    SaveItem("saved", items)
      .then((res) => {
        console.warn("saved", res);
      })
      .catch((e) => console.warn(e));
  };

  goToDetails = () => {
    setSaved([]);
    props.navigation.navigate("SaveScreen");
  };

---

有关更多信息，请参见：

对不起，为什么不使用减速器？我认为通过redux或react上下文，你可以存储任何你想要的值，并且在任何地方都可以使用。P.s.花2小时研究挂钩将为你节省大量的课后时间，但为什么不使用减速机呢？我认为通过redux或react Context，你可以存储任何你想要的值，并且在任何地方都可以使用。P.s.花2小时研究挂钩将为你节省大量的时间。谢谢你的回复，我收到一个保存的未定义警告。按任何想法为什么？删除所有这些参考。此项为保存项；应在保存项目上；是的，这是我尝试的第一件事。虽然没有保存问题，但谢谢您的回复，我收到了一条保存的未定义警告。是否知道原因？删除所有这些引用。此项为保存项；应在保存项目上；是的，这是我尝试的第一件事，但并没有解决问题