ResizeObserver 调用期间未捕获的类型错误：chartObj.width 不是函数

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 中，显示浏览器控制台并单击错误中的代码 link。

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

使用`console.log()`

调试

添加，在错误前一行，

console.log(chartObj);

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

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

ResizeObserver 调用期间未捕获的类型错误：chartObj.width 不是函数

Uncaught TypeError during ResizeObserver Call: chartObj.width is not a function

javascript

debugging

typescript

dc.js

使用 Chrome DevTools 进行调试

使用`console.log()`

ResizeObserver 调用期间未捕获的类型错误：chartObj.width 不是函数

Uncaught TypeError during ResizeObserver Call: chartObj.width is not a function

javascript

debugging

typescript

dc.js

使用 Chrome DevTools 进行调试

使用console.log()

使用`console.log()`