Question

我正在使用React Native Hook's useKeyboard()钩子在键盘打开时更改state，并捆绑在useEffect()中，例如：

import React, { useState, useEffect } from "react";
import { useKeyboard } from "react-native-hooks";

import { Container, Logo, Input } from "../components/UI";

const Sample = () => {
  const [shouldDisplay, setDisplay] = useState(true);

  const { isKeyboardShow } = useKeyboard();
  // This is where it breaks
  useEffect(() => {
    if (isKeyboardShow !== undefined) {
      setDisplay(!isKeyboardShow); // Hide Logo when keyboard is shown
    }
    // I should return a cleanup() function but what to put in it?
  }, [isKeyboardShow]);

  return (
    <Container>
      {shouldDisplay && <Logo />}
      <Input />
    </Container>
  );
};
export default Sample;

但是当我导航到另一个view（使用react-navigation）时，如果键盘打开，则会出现错误消息

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消使用useEffect清理功能中的所有订阅和异步任务。

我确定这段代码会导致该问题，因为在我评论它时它不会出现。

我实际上不知道如何清理我的订阅

问题似乎来自useKeyboard()钩子本身。我制作了自己的钩子，它的工作原理就像是一种魅力：

import React, { useEffect, useState } from 'react';
import { Keyboard } from 'react-native';

export default function useKeyboard() {
    const [shown, setShown] = useState(false);

    const handleKeyboardDidShow = () => {
        setShown(true);
    };
    const handleKeyboardDidHide = () => {
        setShown(false);
    };

    useEffect(() => {
        Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow);
        Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide);

        return () => {
            Keyboard.removeListener('keyboardDidShow', handleKeyboardDidShow);
            Keyboard.removeListener('keyboardDidHide', handleKeyboardDidHide);
        };
    }, []);

    return {
        isKeyboardShow: shown,
    };
}

取消挂钩订阅

0 个答案: