为什么函数在react and Chart.js中不使用`usecallback'更新

Question

背景：我正在使用React和Chart.js显示条形图。我还使用Chartjs-Plugin-Dragdata和Chartjs-Plugin-Zoom在某些限制内拖动和缩放我的图表。

我正在尝试做的事情：在DragData插件中，可以选择使用自定义的 ondragstart 和ondragend andragend 函数（doc：doc：doc： https://github.com/chrispahm/chrispahm/chartjs-plugin-plugin-dragdata ）选项对象。每当更新某个状态时，我都想更改此功能。该状态已在另一个组件中更新，我可以通过usefect挂钩收听其更改。

// works when setActiveState is called
useEffect(()=> {
    console.log(activeState) // changes from state_1 to state_2
}, [activeState]);

在实际代码中：

export const SomeComponent: FC = () => {
    const { activeState } = useContext(CertainContext)
    const data = //.. some data

    const onDragStart = (event, elIndex, chartIndex)=> {
        console.log(activeState) // <-- here I have the issue, always state_1
    }
    const options = {
        // other options
        plugins: {
            dragData: {
                onDragStart: onDragStart
            }
        }
    }
    return (
      <Chart
        type="bar"
        options={options}
        data={data}
      />
    )
}

问题是，无论我尝试什么，ondragstart函数似乎都“保存”了第一个activeState值值，从不修改或更新它。

我尝试的：从我的理解中，它与函数值围绕值关闭的方式有关，因此，我也尝试使用usecallback hook在<<<<<<<<<代码> ActiveState 更改，无成功。

export const SomeComponent: FC = () => {
    const { activeState } = useContext(CertainContext)
    const data = //.. some data

    const onDragStart = useCallback((event, elIndex, chartIndex)=> {
        console.log(activeState) // <-- here I have the issue, always state_1
    }, [activeState])
    const options = {
        // other options
        plugins: {
            dragData: {
                onDragStart: onDragStart
            }
        }
    }
    return (
      <Chart
        type="bar"
        options={options}
        data={data}
      />
    )
}

我敢肯定，该组件正在重新渲染，但尤其不是该功能。选项中的其他值正在更新。例如：

    const options = {
        // other options
        plugins: {
            zoom: {
                wheel: {
                    enabled: activeState === "state_1" // This actually is being updated and works
                }
            }
        }
    }

我还尝试使用usememo为选项对象本身和更多组合尝试，但是您可能认为我还不习惯钩子的工作方式。如有必要，我还可以提供更多信息

Answer 1

它看起来像Chardjs-Plugin-Dragdata登录事件有关inialization的事件，并且以后不会更新它们。您需要使用useref获得当前值。

const { activeState } = useContext(CertainContext);

const ref = useRef('');
ref.current = activeState;

...

const options = {
  // other options
  plugins: {
      dragData: {
          onDragStart: () => {
            console.log(ref.current);
          },
      }
  }
}