使用 useCallback 反应多个 useEffect

Question

我在使用 useEffect 和 useCallback 时遇到了一些困难。我的组件由两个输入字段和两个 select 元素组成。

对于两个输入字段，我有以下 useEffect，它会在 500 毫秒后触发 setTimeout。

useEffect(() => {
    console.log('useEffect B');
    const timeout = setTimeout(() => console.log('test'), 500);
    return () => clearTimeout(timeout);
  }, [fromValue, toValue]);

对于我的两个 select 字段，我有另一个简单的 useEffect

useEffect(() => {
    console.log('useEffect A');
  }, [fromSymbol, toSymbol]);

然而，在这两种情况下，我都想触发另一种方法，它会进行一些计算，所以我想，我可以将我的代码更改为：

const calculateResult = useCallback(async () => {
    console.log('calculateResult');
    console.log(fromSymbol, toSymbol);
    console.log(fromValue, toValue);
  }, [fromSymbol, toSymbol, fromValue, toValue]);

  useEffect(() => {
    console.log('useEffect A');
    calculateResult();
  }, [fromSymbol, toSymbol, calculateResult]);

  useEffect(() => {
    console.log('useEffect B');
    const timeout = setTimeout(() => calculateResult(), 500);
    return () => clearTimeout(timeout);
  }, [fromValue, toValue, calculateResult]);

但是现在，每当更改任何值时，都会触发 useEffect A 和 useEffect B。我假设这是因为 calculateResult 是 useEffect 依赖列表中的一个，但是如果我删除它，我会收到以下警告：React Hook useEffect has a missing dependency: 'calculateResult'. Either include it or remove the dependency array.

如何解决这个问题？对于fromValue和toValue，我想直接触发这个calculateResult，但是对于fromSymbol和toSymbol，我想有一个短暂的延迟。

Answer 1

你是对的 useEffect A 和 useEffect B 都被跟注是因为 calculateResult。所以从 dependency array 中删除它是正确的决定，并且从 react.

中得到警告是正常的

React Hook useEffect has a missing dependency: 'calculateResult'. Either include it or remove the dependency array.

现在你可以做的是添加

eslint-disable-next-line

在您的 useEffect 中以避免警告。而且用起来也很正常

useEffect(() => {
  console.log('useEffect A');
  calculateResult();
  //eslint-disable-next-line
}, [fromSymbol, toSymbol]);

useEffect(() => {
  console.log('useEffect B');
  const timeout = setTimeout(() => calculateResult(), 500);
  return () => clearTimeout(timeout);
  //eslint-disable-next-line
}, [fromValue, toValue]);

使用 useCallback 反应多个 useEffect

React multiple useEffect with useCallback

reactjs

use-effect