我正在尝试在挂钩中使用回调，但无法在回调中获取最新的上下文值答案

【问题标题】：I am trying to use callback in hook but can not get latest context value in the callback我正在尝试在挂钩中使用回调，但无法在回调中获取最新的上下文值
【发布时间】：2021-02-10 18:56:12
【问题描述】：

const Demo = () => {
  const { name } = useContext(AppContext);
  function emiterCallback(val) {
    console.log('value==', name);
    if (name !== val) {
       setContextState({ name: val });
    }
  }
  useEffect(() => {
    window.eventEmitter.on('CHANGED', emiterCallback);
    return () => {
      window.eventEmitter.removeListener('CHANGED', emiterCallback);
    };
  }, []);
}

在类组件中 this.emiterCallback = this.emiterCallback.bind(this) 可以解决我的问题，但是如何在 hook 中使用呢？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您在这里遇到的问题是由于 useEffect 具有空数组依赖项仅运行一次 - 当组件安装时。这意味着它分配为事件函数的emiterCallback 是在第一次渲染时创建的第一个函数。由于您只是在函数体中声明emiterCallback，因此每次重新渲染都会重新制作它，因此在一次重新渲染之后，它将与您在安装组件时分配的事件不同。试试这样的：

import React, { useCallback, useContext, useEffect } from 'react';

...

const Demo = () => {
  const { name } = useContext(AppContext);

  // Assign it to a memoized function that will recalculate as needed when the context value changes
  const emiterCallback = useCallback((val) => {
    console.log('value==', name);
    if (name !== val) {
       setContextState({ name: val });
    }
  }, [name]);

  // Adding the function as a dependency means the .on function should be updated as needed
  useEffect(() => {
    window.eventEmitter.on('CHANGED', emiterCallback);
    return () => {
      window.eventEmitter.removeListener('CHANGED', emiterCallback);
    };
  }, [emiterCallback]);
}

此代码未经测试，但您明白了

【讨论】：

是的，它解决了我的问题，非常感谢你^.^

【解决方案2】：

使用useCallback来记住不需要绑定的效果，因为没有this，因为它不是一个类，在这里阅读更多关于它的信息 - How can I bind function with hooks in React?

【讨论】：