目前，我正在使用 React 进行我的第一个 TypeScript 项目。但是，我不知道 TypeScript，打算在以后某个时候专注于它的静态类型，同时在常规 JS 中准备整个结构。这个 React 应用程序连接到我的个人 API 并从那里获取数据。在常规 JS 中，我通常会在 useEffect 钩子中获取数据，并使用像这样的扩展运算符添加获取的数据setSomeData([...response.data])，但它警告我，Type any[] is not assignable to never[]所以我不得不这样做setSomeData(response.data);。
第二个主要问题是，当我想从组件内部的数组填充此数据时，由于出现以下错误，我无法编译该项目 property make doesn't exist on type never
反应组件：
import { useEffect } from "react";
import carsService from "../services/cars.service";
function Main() {
const [vehiclesList, setVehiclesList] = useState([]);
useEffect(() => {
carsService
.getCars()
.then((response) => {
console.log(response.data);
return setVehiclesList(response.data);
})
.catch((err) => console.error(err));
}, []);
return (
<div className="main-container">
<div className="makes-list">
{vehiclesList.map((vehicle, index) => {
return (
<div key={index}>
<p>{vehicle.make}</p>
</div>
);
})}
</div>
</div>
);
}
对象模型：
const carSchema = new Schema(
{
carId: { type: String, unique: true, require: true },
make: { type: String, unique: true, require: true },
models: [
{
name: { type: String, unique: true },
reviews: [
{
Version: { type: String, require: true },
Year: { type: Number, require: true },
Engine: { type: String, requite: true },
General: { type: String, require: true },
Pros: { type: String, require: true },
Cons: { type: String, require: true },
User: { type: String, require: true },
Date: { type: Date, default: Date.now },
},
],
},
],
},
{
timestamps: {
createdAt: "createdAt",
updatedAt: "updatedAt",
},
}
);
为vehiclesList.
import React from 'react';
import { useEffect, useState } from 'react';
import carsService from '../services/cars.service';
interface Review {
Version: string;
Year: number;
Engine: string;
General: string;
Pros: string;
Cons: string;
User: string;
Date: Date;
}
interface Model {
name: string;
reviews: Review[];
}
interface Car {
carId: string;
make: string;
models: Model[];
createdAt: string;
updatedAt: string;
}
function Main() {
const [vehiclesList, setVehiclesList] = useState<Car[]>([]);
useEffect(() => {
carsService
.getCars()
.then((response) => {
console.log(response.data);
return setVehiclesList(response.data);
})
.catch((err) => console.error(err));
}, []);
return (
<div className="main-container">
<div className="makes-list">
{vehiclesList.map((vehicle, index) => {
return (
<div key={index}>
<p>{vehicle.make}</p>
</div>
);
})}
</div>
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句