javascript - ResizeObserver 调用期间未捕获的 TypeError : chartObj. 宽度不是函数

Question

我正在关注 this example , 使用以下代码

  // resizable chart function
  const callback = (chartObj: DCGraphicType) => () => {
    redrawChartNoTransitions(chartObj.width(null).rescale()); // @typeerror
  };

  // watch for resize and call callback when resize occurs
  React.useEffect(() => {
    new ResizeObserver(callback(chart)).observe(
      d3.select(div.current!).node()!
    );
  }, [chart]);

出现这个错误:

ChartTemplate.tsx:77 Uncaught TypeError: chartObj.width is not a function
    at ResizeObserver.<anonymous> (ChartTemplate.tsx:77)
(anonymous) @ ChartTemplate.tsx:77

注意:辅助函数是

const restoreGetset = (property, value) => f => c => {
  if (Array.isArray(c)) c.forEach(restoreGetset(property, value)(f));
  else {
    const cs = c.children ? [c].concat(c.children()) : [c];
    const last = cs.map(c => c[property]());
    cs.forEach(ch => ch[property](value));
    f(c);
    cs.forEach(ch => ch[property](last));
  }
  return c;
};

// specifically, turn off transitions for a chart or charts
const noTransitions = restoreGetset("transitionDuration", 0);
// specifically, turn off transitions for a chart or charts and redraw
export const redrawChartNoTransitions = noTransitions(c => c.redraw());

这适用于我的本地应用程序(因错误而被迫)，但我想了解并摆脱它...这是一个 Stackblitz错误就位

Answer 1

我还没有学过 Hooks，所以我不确定它在 React 中到底是从哪里来的，但是在页面初始化时 chart 似乎是一个空对象，并且稍后生效。

在您的 chartTemplate.tsx 中:

  React.useEffect(() => {
    new ResizeObserver(callback(chart)).observe(
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      d3.select(div.current!).node()!
    );
  }, [chart]);

这可能不是修复此问题的正确位置，但忽略空白对象:

if (!Object.keys(chart).length) return;

gets it working .

使用 Chrome DevTools 调试

在 Chrome DevTools 中，显示浏览器控制台并单击错误中的代码链接。

在回调内的违规行上设置一个断点，并注意 chart 在第一次命中该行时是一个空对象，但如果你继续它就会变得有效。

使用 console.log() 调试

在错误前一行添加，

console.log(chartObj);

在浏览器调试控制台中产生以下输出:

空对象被打印了两次，每次都跟着错误。然后实例化的图表对象打印两次没有错误。