Reactjs 如何在useEffect钩子中只查看对象中的单个字段？ export const LocaleProvider=（{children}）=>{ const[state，dispatch]=useReducer（reducer，{locale:DEFAULT_locale}）； useffect（（）=>{ const storedLocale=getStoredLocale（）； if（storedLocale）调度（changeLocale（storedLocale））； }, []); useffect（（）=>{ const{locale:currentLocale}=state； saveLocale（currentLocale）； }，[state，state.locale]）； 返回( {儿童} ); };

如何仅查看对象、状态中的单个字段。正如您在第二个效果中所看到的，当我只查看[state.locale]时，我的VS代码显示一个eslint警告（react hook/deps），react hook useffect缺少一个依赖项：“state”。包括它或删除依赖项数组。当我在依赖项数组（[state，state.locale]）中保存代码与添加代码时，会出现警告，因为您正在

useffect

函数中使用state变量。只有在不直接使用state变量进行任何操作的情况下，才会发出此警告

一种方法是使用

useCallback/usemo

，这样做并进一步优化代码。请查看以下代码：

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>
  );
};

export const LocaleProvider=（{children}）=>{
const[state，dispatch]=useReducer（reducer，{locale:DEFAULT_locale}）；
useffect（（）=>{
const storedLocale=getStoredLocale（）；
if（storedLocale）调度（changeLocale（storedLocale））；
}, []);
const getCurrentLocale=useCallback（（）=>state.locale，[state.locale]）
useffect（（）=>{
const currentLocale=getCurrentLocale（）；
saveLocale（currentLocale）；
}，[getCurrentLocale]）；
返回(
{儿童}
);
};

---

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

react hook/deps不够聪明，无法识别只需要对象的某些属性，它只关注dependee变量列表（那些在

useffect

中使用的变量），因此，我们可以通过提取一个变量来配合规则：

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

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

  const getCurrentLocale = useCallback(() => state.locale, [state.locale])

  useEffect(() => {
    const currentLocale = getCurrentLocale();
    saveLocale(currentLocale);
  }, [getCurrentLocale]);

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

---

你为什么要调用use

useffect

两次？@IndrekLasn它们有两种不同的副作用。。

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