对象是类型＆＃x27;未知＆＃x27;在React D3中设置数据时出错

Question

我正在尝试设置一个自定义挂钩，以获取数据，对数据进行一些操纵，并在React D3应用程序中返回操纵数据。数据type在

interface EventViewerDataTypes {
    date: string
    site: string
    type: string
    value: string
}[]

useeffect挂钩中有一个错误对象是'unknown''。

import { useState, useEffect } from "react"
import { json, timeParse } from "d3"

const parseTime = timeParse("%d-%m-%Y")

interface EventViewerDataTypes {
  date: string
  site: string
  type: string
  value: string
}[]
export const useData = (jsonUrl: string) => {
  const [data, setData] = useState<EventViewerDataTypes | null>(null)
  useEffect(() => {
       json(jsonUrl).then((data) => {
           data.forEach((d) => {
                d.date = parseTime(d.date)
                d.value = +d.value
            })
            setData(data)
        })
    }, [])
    return data
}

我有点挣扎在typeScript 和任何帮助，或建议将很有价值。

更新

在Robby Cornelissen的帮助下，我取得了一些进展并更新了代码，但仍然有一些问题。因此，我尝试更新eventViewerDatatypes，

interface EventViewerDataTypes {
    date: string | Date | null
    site: string
    type: string
    value: string | number
}[]

但仍有一些错误

json<EventViewerDataTypes[]>(jsonUrl).then((data) => {
    data?.forEach((d) => {

        // Error!
        d.date = parseTime(d.date) 
        // Argument of type 'string | Date | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'

        d.value = +d.value
    })

    // Error!
    //Argument of type 'EventViewerDataTypes[] | undefined' is not assignable to parameter of type 'SetStateAction<EventViewerDataTypes | null>'
     setData(data) 

})

Answer 1

您的代码存在许多问题：

Untyped JSON响应

，打字稿编译器无法从jsonurl中推断出哪种类型。

根据 json（）函数具有 norfollow noreferrer“> eneric bentic presencip 这应该修复它：

json<EventViewerDataTypes>(jsonUrl).then((data) => {
  /* ... */
});

处理未定义的 JSON响应，

因为从类型定义中看来json（）函数还可以返回undefined，您可能还需要使用可选链接操作员（或一个如果 -Check）在通过data循环之前：

data?.forEach((d) => {
  /* ... */
});

如果setData（data）（data）函数您在不接受undefined <函数/code>，如果 check以及调用setData（null）或不调用setData（）根本。

JSON类型和模型类型之间的差异

在您检索的JSON数据与您希望在应用程序中建模的方式之间存在差异。首先，键入单个eventViewerDataType对象（而不是eventViewerDatatypes），然后使用eventviewerDatatype []时，更容易阅读和方便。需要一个数组。

根据您的处理逻辑，这就是我认为eventViewerDatatype的方式：

interface EventViewerDataType {
  date: Date | null;
  site: string;
  type: string;
  value: number;
}

然后，由于您的JSON似乎只包含字符串，我将使用映射键入将数据传输对象定义为：

type StringValues<T> = {
  [K in keyof T]: string;
}

然后，在您的处理逻辑中，而不是使用foreach（），请使用 map（） 从JSON格式映射（StringValues＆lt; EventViewerDatatype＆gt; []）到您的模型对象（event> eventviewerdatatatepe [] []）。