admin管理员组文章数量:1400211
I am currently learning TypeScript in React so i was working on learning how to make API request with typescript I am fetching a single data by Id the result of the api request is displaying on my web page but i encountered an error the typescript piler is saying Property does not exits here is my code
import { To, useParams } from "react-router-dom";
import axios from "axios";
import { useState, useEffect } from "react";
const SinglePOST = () => {
type Todo = {
title: string;
body: string;
userId: number;
id: number;
};
const { id } = useParams();
const [data, setData] = useState<Todo[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [isError, setError] = useState<any>(null);
useEffect(() => {
const singleReq = async () => {
try {
setLoading(true);
const res = await axios.get<Todo[]>(
`/${id}`,
);
await setData(res.data);
console.log(res.data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
singleReq();
}, [id]);
return (
<div className=' w-full h-screen bg-slate-900 text-neutral-300 p-4'>
<div className='w-full flex justify-center '> Single Post {id}</div>
{loading && <p>...Loading</p>}
{isError && <p> Error in getting post</p>}
<div className='text-2xl'> {data.title}</div>
<div className=' text-xl'> {data.body}</div>
</div>
);
};
export default SinglePOST;
This is the error it was displaying
Property 'title' does not exist on type 'Todo[]'
Property 'body' does not exist on type 'Todo[]'
I am currently learning TypeScript in React so i was working on learning how to make API request with typescript I am fetching a single data by Id the result of the api request is displaying on my web page but i encountered an error the typescript piler is saying Property does not exits here is my code
import { To, useParams } from "react-router-dom";
import axios from "axios";
import { useState, useEffect } from "react";
const SinglePOST = () => {
type Todo = {
title: string;
body: string;
userId: number;
id: number;
};
const { id } = useParams();
const [data, setData] = useState<Todo[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [isError, setError] = useState<any>(null);
useEffect(() => {
const singleReq = async () => {
try {
setLoading(true);
const res = await axios.get<Todo[]>(
`https://jsonplaceholder.typicode./posts/${id}`,
);
await setData(res.data);
console.log(res.data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
singleReq();
}, [id]);
return (
<div className=' w-full h-screen bg-slate-900 text-neutral-300 p-4'>
<div className='w-full flex justify-center '> Single Post {id}</div>
{loading && <p>...Loading</p>}
{isError && <p> Error in getting post</p>}
<div className='text-2xl'> {data.title}</div>
<div className=' text-xl'> {data.body}</div>
</div>
);
};
export default SinglePOST;
This is the error it was displaying
Property 'title' does not exist on type 'Todo[]'
Property 'body' does not exist on type 'Todo[]'
Share Improve this question asked Sep 14, 2022 at 15:47 clemon ezehclemon ezeh 731 gold badge3 silver badges9 bronze badges 1-
1
data
is an array. You have to usemap
to display each todo. – k.tten Commented Sep 14, 2022 at 15:58
2 Answers
Reset to default 2because your data is a single object but you defined your data as a list of objects.
import { To, useParams } from 'react-router-dom';
import axios from 'axios';
import { useState, useEffect } from 'react';
const SinglePOST = () => {
type Todo = {
title: string;
body: string;
userId: number;
id: number;
};
const { id } = useParams();
const [data, setData] = useState<Todo>();
const [loading, setLoading] = useState<boolean>(false);
const [isError, setError] = useState<any>(null);
useEffect(() => {
const singleReq = async () => {
try {
setLoading(true);
const res = await axios.get<Todo>(
`https://jsonplaceholder.typicode./posts/${id}`
);
await setData(res.data);
console.log(res.data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
singleReq();
}, [id]);
return (
<div className=' w-full h-screen bg-slate-900 text-neutral-300 p-4'>
<div className='w-full flex justify-center '> Single Post {id}</div>
{loading && <p>...Loading</p>}
{isError && <p> Error in getting post</p>}
<div className='text-2xl'> {data?.title}</div>
<div className=' text-xl'> {data?.body}</div>
</div>
);
};
You've set the type to your state as a list of Todo objects, hence the error.
const [data, setData] = useState<Todo[]>([]);
Does your get request return an array of todos? If yes then you need to map through them:
{
data.map((todo, idx) => {
return (
<div key={idx}>
<div className='text-2xl'> {data.title}</div>
<div className=' text-xl'> {data.body}</div>
</div>
)
});
}
If your get request returns a todo object then you need to change the type on your state:
const [data, setData] = useState<Todo>();
本文标签: javascriptproperty does not exist on type in React TypescriptStack Overflow
版权声明:本文标题:javascript - property does not exist on type in React Typescript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1744152242a2593109.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论