Реакция обратного вызова с помощью debounce: дочерний компонент не возвращает обратный вызов родительскому компоненту

Question

Я хочу включить функцию debounce при нажатии кнопки.

Я написал debounce функцию в ChildComponent. Это работает в ChildComponent, но я не получаю обратный вызов в ParentComponent.

Родитель:

<MyButton onPress={() => alert("My Button clicked")} />

Ребенок:

const MyButton = props => {
  const {title = 'Enter', style = {}, textStyle = {}, onPress} = props;
  const delayedOnPress = useCallback(
    debounce(() => {
      console.log(onPress);
      return onPress;
    }, 500),
    [],
  );

  const onPressed = () => {
    return delayedOnPress();
  };

  return (
    <TouchableOpacity onPress={onPressed} style={[styles.button, style]}>
      <Text style={[styles.text, textStyle]}>{title}</Text>
    </TouchableOpacity>
  );
};

Может кто-нибудь обновить меня Что я делаю не так?

Спасибо

Answer 1

Некоторые замечания:

• Использование функции стрелки внутри useCallback.
• Нет необходимости возвращать что-либо внутри debounce и функции обработчика.

import React, { useCallback } from "react";
import "./styles.css";
import { TouchableOpacity, Text } from "react-native";
import { debounce } from "lodash";

const debounceAction = debounce(e => {
  console.log(e);   // "My Button clicked"
  alert(e);         // "My Button clicked"
}, 500);

const MyButton = props => {
  const { onPress } = props;
  const delayedOnPress = useCallback(e => debounceAction(e), []);
  const onPressed = () => {
    delayedOnPress(onPress);
  };
  return (
    <TouchableOpacity onPress={onPressed}>
      <Text>Button</Text>
    </TouchableOpacity>
  );
};

export default function App() {
  return (
    <div className="App">
      <MyButton onPress="My Button clicked" />
    </div>
  );
}

---

Обновление

Если мы хотим передать настраиваемую функцию от родителя в качестве реквизита:

const debounceAction = debounce(e => {
  e();       // customized function been passed
}, 500);

...

export default function App() {
  const customizedFunction = () => { // customized function
    alert("test");
  };
  return (
    <div className="App">
      <MyButton onPress={customizedFunction} />  // notice no `()` here
    </div>
  );
}