如何将useState的值传递给BackHandler.addEventListener

Question

我正在使用React Hooks，当我为android背压处理程序创建事件侦听器时，回调函数处理程序中的状态为空！

在类组件中，它工作得很好！

'use strict';

import React, { useState, useEffect } from 'react';
import { BackHandler } from 'react-native';
import TextInput from '../../../../components/TextInput';

export default function Foo() {
  const [comment, setComment] = useState('');

  useEffect(() => {
    const handler = BackHandler.addEventListener(
      'hardwareBackPress',
      handleValidateClose
    );
    return () => handler.remove();
  }, []);

  const handleValidateClose = () => {
    /* Here is empty */
    console.log(comment);
  };

  return <TextInput onChangeText={setComment} value={comment} />;
}

该值应为更改后的useState

Answer 1

handleValidateClose应该在你的依赖数组上。

您可以在useEffect之外使用您的函数，但应该与useCallback一起使用。

 const handleValidateClose = useCallback(() => {
    console.log(comment);
    return true;
  }, [comment]);

  useEffect(() => {
    const handler = BackHandler.addEventListener(
      'hardwareBackPress',
      handleValidateClose,
    );

    return () => handler.remove();
  }, [handleValidateClose]);

您还可以将定义移动到useEffect内部，并添加注释作为依赖项。

useEffect(() => {
    const handleValidateClose = () => {
      console.log(comment);
      return true;
    };

    const handler = BackHandler.addEventListener(
      'hardwareBackPress',
      handleValidateClose,
    );

    return () => handler.remove();
  }, [comment]);

要清理这些内容，请创建一个useBackHandler。

export default function useBackHandler(handler) {
  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handler);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handler);
    };
  });
}

并像这样使用它：

const handleValidateClose = () => {
    console.log(comment);
    return true;
  };

  useBackHandler(handleValidateClose);

请将您的项目配置为使用eslint-plugin-react-hooks。这是一个插件可以帮助你的common pitfalls。