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。

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

1 个答案: