create-react-app : useEffect钩子依赖性警告

我总是使用来自 npx create-react-app my-app –template typescript。.

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;

在’这里1’,我可以理解’文本’必须存在于useEffect的[]中,因为它是触发useEffect的变化因素。

对于’dispatch’,它不是变化因素,所以我认为它不需要放在[]中。对于’_someFunction’也是如此。

但是,如果我不把’dispatch’和’_someFunction’放在里面,控制台会警告我这样的情况:-。

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

另外,我知道使用 “dispatch “和”_someFunction “时 // eslint-disable-next-line react-hooks/exhaustive-deps useEffect里面可以抑制警告。

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

  1. 是否有必要在[]中包含所有的 “text”、”dispatch”、”_someFunction”,这样我就可以服从基于创建-创建-应用的控制台警告,或者说是
  2. 为了抑制成功的CD CI的警告,我可以应用 “文本 “来触发使用效果。// eslint-disable-next-line react-hooks/exhaustive-deps 排除其他不需要的依赖关系,例如’dispatch’、’_someFunction’。

解决方案:

不要抑制警告

如果警告是有原因的! 如果所需的东西使你无法实现你所需要的东西,你只是使用了一个错误的模式!

你并不总是需要钩子

为什么你不在中间再加一个函数,避免使用Effect呢?

const onChange=(value)=>{
  setText(value);
  dispatch(actionA(dataA));
  _someFunction();
}

useEffect是用来随时更新整个组件的。

但我想使用钩子!

好吧,你可以这样做!重要的是你不要使用hook。重要的是,你不要使用一个普通函数作为第一个参数,而是使用一个钩子。

useEffect(() => {
  console.log("text : ", text);
}, [text]);

const dispatchCallback = useCallback(() => {
  dispatch(actionA(dataA));
}, [actionA, dataA]);

useEffect(dispatchCallback, [text]);

useEffect(_someFunction, [text]);

给TA打赏
共{{data.count}}人
人已打赏
未分类

在Firebase上更改URL?

2022-9-9 7:09:25

未分类

PHP。星级评定系统概念?[关闭]

2022-9-9 7:20:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索