onSelected uses stale function even when prop for onSelected changed

While using react plotly I noticed that changes to the onSelected prop are ignored and the initial function used for that prop is called instead when building a lasso based chart. This is an issue when we want to listen to context changes to things like translations.

The code below shows the issue:

  const translations = useTranslation<TaggingIndicatorsTranslations>(
    allTranslations
  );
  const [currentBranch] = useBranch();
.....
.....
.....
   const filterSelectedProductsWithContext = function filterSelectedProductsCB(
    param: PlotSelectionEvent
  ) {
    filterSelectedProducts(param, currentBranch, translations);
  };

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <Plot
        data={table}
        config={{ displayModeBar: false, plotlyServerURL: currentBranch }}
        layout={{
          dragmode: "lasso",
          xaxis: { title: xAndY.x },
          yaxis: { title: xAndY.y },
          autosize: true,
          // title: "Helpful Indicators To Tag",
        }}
        useResizeHandler
        style={{ width: "100%", height: "90%" }}
        onSelected={filterSelectedProductsWithContext}
      />
    </div>
  ); 

In the above translations and branch are context values (custom context values) that change. We want the behavior of onSelected to change to reflect this (to use a new callback.) Even when changes to data are reflected in the render we still see the stale onSelected is being used when lasso selecting bullet points.

This code snippet was used in a react hook with react-plotly version 2.4.0 and 2.3.0.

I have tried using big arrow and the "function" keyword but neither work. Looking at the source code for factory.js (https://github.com/plotly/react-plotly.js/blob/master/src/factory.js) I do see there is some handler replacement logic in "syncEventHandlers" when handlers are not the same to the props. I was thinking though that the updatePlotly function (that calls this synchronization might) might not be getting called during componentDidUpdate because the onSelected prop wasn't checked.

As a workaround right now I have to take my contexts and place them in a global wrapper so their changes are visible. Its not a good solution but I can't think of a better one and our contexts are mostly global for the entire dom tree anyways.

从 src/factory.js 开始，阅读 componentDidUpdate 期间的 syncEventHandlers 和 updatePlotly 路径。使用不断变化的 context 值重现套索选择场景，并确认 onSelected 使用的是最新的 prop 回调，而不是初始回调。