使用去抖响应回调：Child 组件未将回调返回到 Parent 组件

Question

我想在按下按钮时包含 debounce 函数。

我在 ChildComponent 中写了一个 debounce 函数。它在 ChildComponent 中有效，但我在 ParentComponent 中没有收到回调。

Parent:

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

Child:

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内使用箭头函数。
不需要 return 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>
  );
}

更新

如果我们想将来自父级的自定义函数作为 prop 传递：

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>
  );
}

使用去抖响应回调：Child 组件未将回调返回到 Parent 组件

React callback with debounce: Child component isn't returning callback to Parent component

javascript

reactjs

react-native

lodash

debounce

更新