useContext 未在回调中更新其值

Question

useConext 值在我附加到wheel 事件的回调中没有更新。我试图安慰但仍在打印静态值。但在回调之外，它正在打印更新的值

const Home = () => {
  //accessing my context
  var [appState, dispatch] = useContext(CTX);
  //printing updated value here (working perfect here)
  console.log(appState);

  //my callback on wheel event (also using debouce to queue burst of events)
  var fn = debounce(e => {
    //incrementing value ++1
    dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' });
    //printing static value here (problem here)
    console.log(appState);
  }, 500);

  //setting and removing listener on component mount and unmount
  useEffect(() => {
    window.addEventListener('wheel', fn);
    return () => {
      window.removeEventListener('wheel', fn);
    };
  }, []);
};

Answer 1

在挂载时，侦听器使用一个函数变量进行初始化，该变量将appStore 的第一个值包含在其词法范围内。

请参阅Closures。

要修复它，请将其移动到 useEffect 范围内。

const Home = () => {
  const [appState, dispatch] = useContext(CTX);

  useEffect(() => {
    const fn = debounce(e => {
      dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' });

      console.log(appState);
    }, 500);

    window.addEventListener('wheel', fn);
    return () => {
      window.removeEventListener('wheel', fn);
    };
  }, [appState]);
};

友情提示：

• 使用linter like eslint - 它应该警告你在useEffect 中使用appState
• Don't use var - 容易出错。

Answer 2

您的 debance 函数在每次渲染中都会发生变化，而 useEffect 仅捕获第一个渲染，您可以使用 useCallback 解决此问题：

const Home = () => {
  // accessing my context
  const [appState, dispatch] = useContext(CTX)
  // printing updated value here (working perfect here)
  console.log(appState)

  // my callback on wheel event (also using debouce to queue burst of events)
  const fn = useCallback(
    () =>
      debounce(e => {
        // incrementing value ++1
        dispatch({ type: 'INCREMENT_COMPONENT_COUNTER' })
        // printing static value here (problem here)
        console.log(appState)
      }, 500),
    [appState, dispatch],
  )

  // setting and removing listener on component mount and unmount
  useEffect(() => {
    window.addEventListener('wheel', fn)
    return () => {
      window.removeEventListener('wheel', fn)
    }
  }, [fn])
}