问题

I follow this link to handle input:

  const handleSearch = useMemo(() => {
    _.debounce(text => {
      console.log(text);
    });
  }, []);

  const handleOnSearch = useCallback(
    text => {
      handleSearch(text);
    },
    [handleSearch],
  );

but I get an error: handleSearch is not a function (this error only triggers when I enter text into the input)

But if I use this code, everything is okay:

  const handleSearch = useRef(
    _.debounce(text => {
      console.log(text);
    }, 1000),
  );

  const handleOnSearch = useCallback(text => {
    setTextSearch(text);
    handleSearch.current(text);
  }, []);

Can someone explain to me, please?

  const handleSearch = useMemo(() => {
    _.debounce(text => {
      console.log(text);
    });
  }, []);

  const handleOnSearch = useCallback(
    text => {
      handleSearch(text);
    },
    [handleSearch],
  );

  const handleSearch = useRef(
    _.debounce(over => {
      console.log(over);
    }, 1000),
  );

  const handleOnSearch = useCallback(text => {
    setTextSearch(text);
    handleSearch.current(text);
  }, []);

答案1

得分: 1

你没有从 _.debounce 返回值，因此 handleSearch 变成了未定义的状态。

const handleSearch = useMemo(() => {
  return _.debounce(text => {
    console.log(text);
  });
}, []);

或者你可以使用 useCallback 来返回值，与使用 useRef 相同：

const handleSearch = useCallback(
  _.debounce(text => {
    console.log(text);
  }), []
);

但是这样会导致 _.debounce 在每次渲染时都会执行。

  const handleSearch = useMemo(() => {
    return _.debounce(text => {    // use return here
      console.log(text);
    });
  }, []);

   const handleSearch = useCallback(
    _.debounce(text => {
      console.log(text);
  }), []);

答案2

得分: 0

useMemo 期望一个回调函数，并返回回调函数的结果。它的目的是缓存结果，这样每次组件渲染时都不需要重新运行回调函数。

因此，由于传递给 useMemo 的回调函数没有返回值，handleSearch 是未定义的。这是如何修复它的方式：

const handleSearch = useMemo(() => {
    return _.debounce(text => {
        console.log(text);
    });
}, []);

const handleOnSearch = useCallback(
   text => {
       handleSearch(text);
   }, [handleSearch]);

然而，我认为你将 useMemo 和 useCallback 结合使用的方式没有太多意义，因为 handleSearch 从不改变，而 handleOnSearch 只是调用 handleSearch。因此，你可以将它们简化为单独的 useMemo（你也可以使用 useCallback，但我认为这样更可读）：

const handleSearch = useMemo(() => {
    return _.debounce(text => console.log(text));  
}, []);

然后在你使用 `handleOnSearch` 时，只需使用 `handleSearch`。

<details>
<summary>英文:</summary>

useMemo is expecting a callback and it will return the callback result. 
its purpose is to cache the result so the callback doesn&#39;t need to be re-run every time the component is rendered. 

So since the callback sent to useMemo doesn&#39;t return a value, `handleSearch` is undefined. this is how you fix it:

    const handleSearch = useMemo(() =&gt; {
        return _.debounce(text =&gt; {
            console.log(text);
        });
    }, []);
    
    const handleOnSearch = useCallback(
       text =&gt; {
           handleSearch(text);
       }, [handleSearch]);

however - I don&#39;t see much purpose is the way you are combining useMemo and useCallback, since the handleSearch never changes, and handOnSearch only calls handleSearch. 
Therefore, you can reduce them to a single useMemo (you can use useCallback but I think this is slightly more readable):

    const handleSearch = useMemo(() =&gt; {
        return _.debounce(text =&gt; console.log(text));  
    }, []);

and then whenever you use `handleOnSearch` just use `handleSearch`

</details>