Question

我已经设置了商店功能

export const storeData = async text => {
    try {
        await AsyncStorage.getItem("notes")
            .then((notes) => {
                const noteList = notes ? JSON.parse(notes) : [];
                noteList.push(text);
                AsyncStorage.setItem('notes', JSON.stringify(noteList));
            });
    } catch (error) {
        console.log("error saving" + error);
    }
};

从标题后退按钮调用时，它按预期工作

navigation.setOptions({
      headerLeft: () => (
        <HeaderBackButton onPress={() => {
            storeData(text).then(() => {
navigation.goBack();
         }
        }} />
      )
    });

但是从硬件后退按钮使用它时，它给我一个“未处理的承诺拒绝，未定义不是对象。评估_this.navigation”。

  useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
        storeData(text).then(() => {
          this.navigation.goBack();
        });
    });
    return () => backHandler.remove();
  }, [text]);

谁能看到导致此行为的原因？

Answer 1

将this替换为props。 this关键字主要用于类组件中，此处是功能组件，因此props.navigation

可以进行导航

Answer 2

完整代码如下

function EditNoteScreen({ navigation }) {
  const [text, setText] = useState("");

  const backAction = () => {
    storeData(text).then(() => {
      Keyboard.dismiss();
      navigation.goBack();
    });
  }

  useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
      backAction();
    });

    navigation.setOptions({
      headerLeft: () => (
        <HeaderBackButton onPress={() => {
          backAction();
        }} />
      )
    });

    return () => backHandler.remove();
  }, [text]);

Answer 3

如果我只是使用硬件后退功能运行存储功能，则代码将起作用，并且硬件后退按钮的默认行为会将我带回，但是新项目直到刷新后才会显示，这就是为什么我想要返回行为延迟到保存完成。

一种忽略此情况的方法只是简单地根据状态更改再次更新单位列表，但我宁愿从刷新那里获取信息，而不是弹出来。

硬件背压可能未处理的承诺被拒绝

3 个答案: