Question

export const LocaleProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { locale: DEFAULT_LOCALE });

  useEffect(() => {
    const storedLocale = getStoredLocale();
    if (storedLocale) dispatch(changeLocale(storedLocale));
  }, []);

  useEffect(() => {
    const { locale: currentLocale } = state;
    saveLocale(currentLocale);
  }, [state, state.locale]);

  return (
    <LocaleContext.Provider value={[state, dispatch]}>
      {children}
    </LocaleContext.Provider>
  );
};

如何仅监视对象状态中的单个字段。如您在第二个效果中所看到的，当我仅观看[state.locale]时，我的VS代码显示了附带警告（react-hook / exhaustive-deps），React Hook useEffect缺少依赖项：“ state”。包括它或删除依赖项数组。当我保存代码时，VS代码将状态添加到依赖关系数组（[state，state.locale]）中。

Answer 1

react-hook/exhaustive-deps不够聪明，无法识别出只需要对象的某些属性，它着重于一系列依赖变量（useEffect中使用的变量），因此我们可以与通过提取变量来修改规则：

const { locale: currentLocale } = state;
useEffect(() => {
  saveLocale(currentLocale);
}, [currentLocale]);

Answer 2

发出警告是因为您正在使用sym close 0 msft 103 0 msft 102 1 msft 100 1 amd 36 2 amd 35 3 amd 30函数中的状态变量。仅当您不直接将状态变量用于任何事情时，此警告才会发出。

执行此操作并进一步优化此代码的一种方法是使用useEffect。检查以下代码：

useCallback/useMemo

使用上面的代码，您可以根据需要限制依赖项。

如何在useEffect挂钩中仅监视对象中的单个字段？

2 个答案: