用 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>

  );

}