useEffect 缺少依赖项导致另一个错误

Question

以下代码给出“useEffect has a missing dependency”错误：

  useEffect(() => {
    inputToOutput();
  }, [sortalphaStatus, sorttypeStatus]);

所以我把它改成这样：

  useEffect(() => {
    inputToOutput();
  }, [sortalphaStatus, sorttypeStatus, inputToOutput]);

但是现在我收到了这个错误：“'inputToOutput' 函数使 useEffect Hook（在第 363 行）的依赖关系在每次渲染时都会发生变化。要解决这个问题，请将 'inputToOutput' 的定义包装在它自己的 useCallback() Hook 中"

我的函数被调用的格式如下：

   const inputToOutput = e => {
    inputTextTmp = inputText;
    blah blah;
   };

我不知道该怎么办。我想在我的功能组件中设置状态时使用回调函数，但知道这是不可能的，所以我使用了一个 useEffect 钩子。但是现在我遇到了这些我无法克服的错误。

有什么建议吗？

Answer 1

将你的函数包裹在useCallback()钩子中：

const inputToOutput = useCallback((e) => {
    inputTextTmp = inputText;
    blah blah;
}, []);

 useEffect(() => {
    inputToOutput();
 }, [sortalphaStatus, sorttypeStatus, inputToOutput]);

Answer 2

第一个警告是因为如果你在 useEffect 中调用一个函数，通常你会想在它更新时调用 useEffect。 现在，第二个警告是因为每次您的组件呈现函数时都会返回一个不同的函数对象，然后每次都会触发您的 useEffect（当它注意到其中一个依赖项发生更改时触发了 useEffect），因此为避免您需要包装你的函数与 useCallback 所以函数将是相同的。

Answer 3

它告诉你像这样包装你的inputToOutput :-

 const inputToOutput = useCallBack((e) => {
    inputTextTmp = inputText;
    blah blah;
   },[]);

现在[] 可能具有目前我无法从所述代码中推断出的依赖项。

它告诉你这样做的原因是因为在每次渲染中都会创建一个新的 inputToOutput 函数，即完全是一个新对象，如果将其作为依赖项传递给 useEffect 将再次导致渲染，这将再次创建一个新的函数等等.....on