将详尽的依赖性添加到使用效应中，用户回背会导致无限循环

Question

所以我以为我正在挂起这些钩子，但是皮棉规则react-hooks/exhaustive-deps正在绊倒我。

我在我的提供商内有这种方法

const onScreenChange = useCallback(
(key, value) => {
  const newState = Object.assign({}, screenState, { [key]: value });
  localStorage.setItem('screens', JSON.stringify(newState));
  setScreenState(newState);
},
[]); // screenState

我允许我的其余应用程序通过将其传递到值prop ...

来访问它。

return <Provider value={{onScreenChange, ... }}>children</Provider>

然后，当路由更改时，我正在从子组件中调用此方法

useEffect(() => {
   if (match.path === `/${screenKey}`) {
     onScreenChange(screenKey, 'external');
   }
}, [onScreenChange, match.path, screenKey]);

上面的代码正常工作，我看不到这引起任何错误。但是Eslint告诉我：

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

当我将screenState添加到阵列中时，一旦调用了onScreenChange方法，就会引起无限循环。

很明显为什么现在会发生循环，但是我该如何停止并遵守规则？

？

事先感谢您的任何帮助！

Answer 1

ESLINT的警告似乎是正确的。由于onScreenChange方法多次调用，因此无法正确更新ScreenState值。您必须提供screenState作为useCallback

的依赖性

const onScreenChange = useCallback(
(key, value) => {
  const newState = Object.assign({}, screenState, { [key]: value });
  localStorage.setItem('screens', JSON.stringify(newState));
  setScreenState(newState);
},
[screenState]); 

编写相同代码而不添加DEP的另一种方法是使用状态更新口回调模式

const onScreenChange = useCallback(
(key, value) => {

  setScreenState(oldState => {
       const newState = Object.assign({}, oldState, { [key]: value });
       localStorage.setItem('screens', JSON.stringify(newState));
       return newState;
  });
},
[]); 

但是，如果您绝对确定要做的事情是正确的，则可以选择禁用DEP警告。

您可以在下面阅读以获取更多信息：

如何修复React Hook usefect中缺少依赖性