英文:
Typescript + React: Getting Property Does Not Exist on Interface, when it does
问题
以下是代码部分的翻译：
export interface Root {
stationId: number;
results: Results;
}
function App() {
const [data, setData] = useState<Root[]>([]);
function getTimes(): Promise<Root[]> {
return fetch("http://localhost:3000/times/9117")
.then((res) => res.json())
.then((data) => data as Root[]);
}
useEffect(() => {
getTimes().then((item) => setData(item));
}, []);
console.log(data);
return <div className="App">{data.stationId}</div>;
}
export default App;
{
"stationId": 9117,
"results": {
"LatestUpdate": "2023-02-09T09:59:29",
"DataAge": 63,
"Metros": [
{...}
]
}
请注意，上述代码是原始代码的翻译，不包括问题的回答。如果您有其他需要，请随时提出。
英文:
Working with an API that I have matched the properties to an interface using an auto tool:
export interface Root {
stationId: number;
results: Results;
}
For brevity, I won't include the additional results interfaces. I then send the fetch request to get the data, and I am now trying to display this in my JSX elements.
function App() {
const [data, setData] = useState<Root[]>([]);
function getTimes(): Promise<Root[]> {
return fetch("http://localhost:3000/times/9117")
.then((res) => res.json())
.then((data) => data as Root[]);
}
useEffect(() => {
getTimes().then((item) => setData(item));
}, []);
console.log(data);
return <div className="App">{data.stationId}</div>;
}
export default App;
The API response looks something like this:
{
"stationId": 9117,
"results": {
"LatestUpdate": "2023-02-09T09:59:29",
"DataAge": 63,
"Metros": [
{...}
]
}
I receive an error that says:
>Property 'stationId' does not exist on type 'Root[]'
I am not sure how this is possible since when I hover over stationId it says (property) Root.stationId: number. Any ideas on why it is not recognizing this as a property of the interface? Also, how would I read the properties in the API response like data.results.Metros?
I have tried console.log(data), and it shows the object as expected. I also have tried JSON.stringfy(data) which also works and shows on the page. I am not sure why I can't just read this property and show it in an element.
答案1
得分: 3
以下是翻译好的代码部分：
function App() {
const [data, setData] = useState<Root | null>(null);
function getTimes(): Promise<Root> {
return fetch("http://localhost:3000/times/9117")
.then((res) => res.json())
.then((data) => data as Root);
}
useEffect(() => {
getTimes().then((item) => setData(item));
}, []);
return <div className="App">{data?.stationId}</div>;
}
export default App;
英文:
There is a misalignment between the data you are getting, which is an object, and how you defined your type, which is an array of that object. You could do so instead:
function App() {
const [data, setData] = useState<Root | null>(null);
function getTimes(): Promise<Root> {
return fetch("http://localhost:3000/times/9117")
.then((res) => res.json())
.then((data) => data as Root);
}
useEffect(() => {
getTimes().then((item) => setData(item));
}, []);
return <div className="App">{data?.stationId}</div>;
}
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论