Typescript + React + D3v4 : `Object is possibly ' undefined' error`, 在 d3 scaleBand

Question

如何解决 Object is possible 'undefined' error，发生在 'yScale'

interface IData {
  id: string;
  phone_number: string,
}
const data : IData[]
const devices = data.map((d) => d.phone_number)
const yScale = d3.scaleBand()
  .range([0, 30 * devices.length])
  .domain(devices)

const yAccessor = (d: string) => yScale(d)

我认为这是因为 typescript 认为 d3 的 scaleBand 将返回 undefined 因为 'devices' 变量是任何空数组。当我将鼠标悬停在我的 IDE 中的“设备”上时，它会显示 “let devices: string[]”。但是，初始状态下的“设备”是空的(因为尚未提交搜索)。如果“设备”已经包含元素列表，则不会发生此错误。

这是 d3-scale 的 type definitions

export interface ScaleBand<Domain extends { toString(): string }> {
    /**
     * Given a value in the input domain, returns the start of the corresponding band derived from the output range.
     * If the given value is not in the scale’s domain, returns undefined.
     *
     * @param x  A value from the domain.
     */
    (x: Domain): number | undefined;
...
}

Answer 1

鉴于 data 可能是一个空数组，您可以在调用 yScale 之前进行检查以确保 data 不为空.

if (!data.length) {
  return;
}
const devices = data.map((d) => d.phone_number)
const yScale = d3.scaleBand()
  .range([0, 30 * devices.length])
  .domain(devices)

如果数据是一个空数组，这将导致您的钩子(Hook)/方法提前返回。