Question

我有这个数组类型：

interface Details {
  Name: string;
  URL: string;
  Year: number;
}
interface AppState {
  data: Details[];
}

我正在使用D3创建这样的x轴：

 createChart = () => {
    const { data } = this.state;
    const width = 900,
      height = 600;

    // x-axis
    const x = d3
      .scaleLinear()
      .domain([
        d3.min(data, ({ Year }) => (Year ? Year - 1 : 0)), // ERROR
        d3.max(data, ({ Year }) => (Year ? Year + 1 : 0)) // ERROR
      ])
      .range([0, width]);
  };

在使用d3.min和d3.max的标记行上，出现以下错误：

输入'number | undefined'不可分配给'number | { valueOf（）：数字； }'。类型“未定义”不能分配给类型 '编号| {valueOf（）：number; }'。

我如何进行这项工作？

Answer 1

对于您对Option selected: {value: "stark@gmail.com", label: "rickon"}// Selected data is okay Error: react-select.esm.js?acac:1224 Uncaught TypeError: str.replace is not a function at trimString (react-select.esm.js?acac:1224) at Object.eval [as filterOption] (react-select.esm.js?acac:1246) at Select.filterOption (react-select.esm.js?acac:3952) at toOption (react-select.esm.js?acac:4038) at options.reduce.render (react-select.esm.js?acac:4092) at Array.reduce (<anonymous>) at Select.buildMenuOptions (react-select.esm.js?acac:4071) at Select.componentWillReceiveProps (react-select.esm.js?acac:3575) at callComponentWillReceiveProps (react-dom.development.js?cada:11395) at updateClassInstance (react-dom.development.js?cada:11605) trimString @ react-select.esm.js?acac:1224 (anonymous) @ react-select.esm.js?acac:1246 filterOption @ react-select.esm.js?acac:3952 toOption @ react-select.esm.js?acac:4038 options.reduce.render @ react-select.esm.js?acac:4092 buildMenuOptions @ react-select.esm.js?acac:4071 componentWillReceiveProps @ react-select.esm.js?acac:3575 callComponentWillReceiveProps @ react-dom.development.js?cada:11395 updateClassInstance @ react-dom.development.js?cada:11605 updateClassComponent @ react-dom.development.js?cada:14648 beginWork @ react-dom.development.js?cada:15598 performUnitOfWork @ react-dom.development.js?cada:19266 workLoop @ react-dom.development.js?cada:19306 callCallback @ react-dom.development.js?cada:149 invokeGuardedCallbackDev @ react-dom.development.js?cada:199 invokeGuardedCallback @ react-dom.development.js?cada:256 replayUnitOfWork @ react-dom.development.js?cada:18532 renderRoot @ react-dom.development.js?cada:19422 performWorkOnRoot @ react-dom.development.js?cada:20296 performWork @ react-dom.development.js?cada:20208 performSyncWork @ react-dom.development.js?cada:20182 interactiveUpdates$1 @ react-dom.development.js?cada:20449 interactiveUpdates @ react-dom.development.js?cada:2170 dispatchInteractiveEvent @ react-dom.development.js?cada:4882 react-dom.development.js?cada:17071 The above error occurred in the <Select> component: in Select (created by StateManager) in StateManager (created by CustomerSearch) in div (created by FormGroup) in FormGroup (created by CustomerSearch) in div (created by Col) in Col (created by CustomerSearch) in div (created by CustomerSearch) in CustomerSearch (created by Relay(CustomerSearch)) in Relay(CustomerSearch) (created by ReactRelayQueryRenderer) in ReactRelayQueryRenderer (created by CustomerSearchPage) in div (created by CustomerSearchPage) in div (created by CustomerSearchPage) in CustomerSearchPage (created by ProductPerformance) in div (created by Row) in Row (created by ProductPerformance) in div (created by Container) in Container (created by ProductPerformance) in div (created by ProductPerformance) in ProductPerformance (created by Relay(ProductPerformance)) in Relay(ProductPerformance) (created by ReactRelayQueryRenderer) in ReactRelayQueryRenderer (created by ProductPerformancePage) in div (created by ProductPerformancePage) in div (created by ProductPerformancePage) in ProductPerformancePage (created by Route) in Route (created by RoutePage) in div (created by RoutePage) in Router (created by HashRouter) in HashRouter (created by RoutePage) in RoutePage (created by App) in div (created by App) in App Consider adding an error boundary to your tree to customize error handling behavior.的调用，编译器将使用以下type definition：

d3.min()

如您所见，该函数可以返回export function min<T, U extends Numeric>(array: Iterable<T>, accessor: (datum: T, index: number, array: Iterable<T>) => U | undefined | null): U | undefined;（在您的情况下为U的类型，即Details.Year）或number。但是，这与undefined方法的type definition不匹配，该方法采用数字数组或可强制转换为数字的值：

.domain()

这说明了为什么会出现错误。显然，domain(domain: Array<number | { valueOf(): number }>): this;也是如此。

看documentation的原因，d3.max()返回d3.min()的原因非常有限：

如果迭代器不包含可比较的值，则返回undefined。

鉴于您的代码，可以保证不会遇到此问题。因此，您可以安全地将undefined和d3.min()的返回值强制转换为d3.max()：

number

错误：输入'number | undefined'不可分配给'number | {valueOf（）：number; }'？

1 个答案: