Question

我总是使用npx create-react-app my-app --template typescript中的react代码库。

function App() {
  const [text, setText] = useState('');
  const dispatch = useDispatch();

  const _someFunction = useCallback(async () => {
    try {
      dispatch(actionB(dataB))
    } catch (error) {
      // 
    }

  }, [dispatch]); <- here 2

  useEffect(() => {
    console.log('text : ', text);
    dispatch(actionA(dataA));
    _someFunction();
  }, [text, dispatch, _someFunction]); <- here 1

  return (
    <div className="App">
        hello
    </div>
  );
}

export default App;

在'here 1'，我可以理解useEffect的[]中必须包含'text'，因为它是触发useEffect的变化因素。

对于“派遣”，它不是变化因素，因此我认为不需要将其放置在[]中。对于“ _someFunction”也是如此。

但是，如果我不放置“ dispatch”和“ _someFunction”，则控制台会警告我这样的东西：-

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

此外，我知道在useEffect中使用// eslint-disable-next-line react-hooks/exhaustive-deps可以禁止显示警告。

我想知道正确的方法。我的问题是：-

是否有必要在[]中包含所有'text'，'dispatch'，'_ someFunction'，这样我才能遵守基于create-create-app的控制台警告，或者
我将仅包括要检测的因素，即触发useEffect的“文本”。为了抑制成功CD / CI的警告，我可以应用// eslint-disable-next-line react-hooks/exhaustive-deps来排除其他不需要的依赖项，例如'dispatch'，'_someFunction'

Answer 1

不要抑制警告

如果有警告，则是有原因的！如果需要的东西无法满足您的需求，那么您使用的是错误的模式！

您并不总是需要钩子

为什么在避免useEffect之间还只是另一个功能？

Collections.indexOfSubList()

useEffect用于在需要时更新整个组件。

但是我想使用钩子！

好，你可以做到！重要的是，不要将普通函数用作第一个参数，而应使用钩子。您要做的是：

public static boolean contains(int[] a, int[] b) {
    return findArray(a, b) > -1;
}

public static int findArray(int[] a, int[] b) {
    return Collections.indexOfSubList(arrayToList(a), arrayToList(b));
}

public static List<Integer> arrayToList(int[] array) {
    return Arrays.stream(array)
        .boxed()
        .collect(Collectors.toList());
}

看到了吗？每个效果都是独立的。每当变量文本更改时，您都在调用回调。

我不推荐这种模式！钩子太多，不是很有用！

create-react-app：useEffect挂钩依赖项警告

1 个答案:

不要抑制警告

您并不总是需要钩子

但是我想使用钩子！