typescript 为什么要用useeffect来使用本地json数据?

wtlkbnrh  于 2023-03-09  发布在  TypeScript
关注(0)|答案(1)|浏览(90)

我得到这个错误:
TS2345:类型"({酒精:编号;"苹果酸":数量;灰分:编号;"灰分碱度":数量;镁:数量;"总酚":数量;黄酮类化合物:编号;"非黄酮类酚":数量;原花青素:string;"颜色强度":编号;色调:编号;"稀释葡萄酒的OD280/OD315":数量;未知:编号;}|...还有9个..."不能赋值给类型为" SetStateAction〈WineData []〉"的参数。类型为"({酒精:编号;"苹果酸":数量;灰分:编号;"灰分碱度":数量;镁:数量;"总酚":数量;黄酮类化合物:编号;"非黄酮类酚":数量;原花青素:string;"颜色强度":编号;色调:编号;"稀释葡萄酒的OD280/OD315":数量;未知:编号;}|...还有9个..."不能分配给类型" WineData []"。类型" {酒精:编号;"苹果酸":数量;灰分:编号;"灰分碱度":数量;镁:数量;"总酚":数量;黄酮类化合物:编号;"非黄酮类酚":数量;原花青素:string;"颜色强度":编号;色调:编号;"稀释葡萄酒的OD280/OD315":数量;未知:编号;}|...还有9个...."不能分配给类型" WineData "。类型" {酒精:编号;"苹果酸":数量;灰分:编号;"灰分碱度":数量;镁:数量;"总酚":数量;黄酮类化合物:编号;"非黄酮类酚":数量;原花青素:string;"颜色强度":编号;色调:编号;"稀释葡萄酒的OD280/OD315":数量;未知:number ;}"缺少类型" WineData "的以下属性:酒精、颜色强度、镁、葡萄酒类型

16 |
    17 |   useEffect(() => {
  > 18 |     setData(wineData);
       |             ^^^^^^^^
    19 |   }, []);
    20 |
    21 |   return (
4jb9z9bj

4jb9z9bj1#

这是一个很大的错误,你可能会经常看到它,但一旦你理解了它,它实际上是相当简单的。
这一部分告诉您,您的对象(winData)不符合您为useState设置的类型规范。

TS2345: Argument of type '({ Alcohol: number; "Malic Acid": number; Ash: number; "Alcalinity of ash": number; Magnesium: number; "Total phenols": number; Flavanoids: number; "Nonflavanoid phenols": number; Proanthocyanins: string; "Color intensity": number; Hue: number; "OD280/OD315 of diluted wines": number; Unknown: number; } | ... 9 more ...' is not assignable to parameter of type 'SetStateAction<WineData[]>'.

这一部分告诉您wineData对象具有哪些字段和值类型。

Type '({ Alcohol: number; "Malic Acid": number; Ash: number; "Alcalinity of ash": number; Magnesium: number; "Total phenols": number; Flavanoids: number; "Nonflavanoid phenols": number; Proanthocyanins: string; "Color intensity": number; Hue: number; "OD280/OD315 of diluted wines": number; Unknown: number; } | ... 9 more ...' is not assignable to type 'WineData[]'. Type '{ Alcohol: number; "Malic Acid": number; Ash: number; "Alcalinity of ash": number; Magnesium: number; "Total phenols": number; Flavanoids: number; "Nonflavanoid phenols": number; Proanthocyanins: string; "Color intensity": number; Hue: number; "OD280/OD315 of diluted wines": number; Unknown: number; } | ... 9 more ....' is not assignable to type 'WineData'. Type '{ Alcohol: number; "Malic Acid": number; Ash: number; "Alcalinity of ash": number; Magnesium: number; "Total phenols": number; Flavanoids: number; "Nonflavanoid phenols": number; Proanthocyanins: string; "Color intensity": number; Hue: number; "OD280/OD315 of diluted wines": number; Unknown: number; }'

这里是最重要的部分,你已经将你的状态设置为wine_type. winData类型,你传递给它的对象缺少字段alcohol,color_intensity和magnesium。

is missing the following properties from type 'WineData': alcohol, color_intensity, magnesium, wine_type

所以在这里把它分解是一个正在发生的事情的例子。

type Example = {
  param1: string;
  param2: string;
}
function ReactFunction() {
  const [params, setParams] = useState<Example | null>(null)

  const handleClick = () => {
    setParams({ param1: "param" }) // ERROR!: param2 not set 
  }
}

那你怎么解决呢?
2个选项。
1.在调用setter之前,请确保对象具有正确的类型。
1.在类型定义中将字段标记为可选。

相关问题