[英]Object component as Prop React Typescript
I Have a type Data:我有一个类型数据:
export type Data = {导出类型数据 = {
id:Number;
name:String;
username:String;
email:String;
phone:String;
website:String;
}
I wanna fetch data from a api. I'm using typescript so Data is a prop:我想从 api 获取数据。我正在使用 typescript,所以数据是一个道具:
const App = ()=>{
const url = "https://jsonplaceholder.typicode.com/users/1";
const [userData, setUserData] = useState<Data[]>([]);
const getUserData = async () => {
let response = await fetch(url);
let json = await response.json();
setUserData(json);
};
useEffect(() => {
getUserData();
}, []);
return (
<div>
<h2>User Data</h2>
<div>
{userData.map( (item,index)=>{
return(
<div key={index}>
<strong>Name: </strong>
{item.name}
<strong>Website: </strong>
{item.website}
<strong>Email: </strong>
{item.email}
<strong>Phone: </strong>
{item.phone}
</div>
)
} )}
</div>
</div>
)
}
I am getting an error in my code 'userData.map' is not a function and i don´t wanna use setUserData([json])
.我在我的代码中遇到错误 'userData.map' is not a function 并且我不想使用
setUserData([json])
。 Is there an alternative?有其他选择吗?
It is not clear from the endpoint but if you are getting a single Data element from it you can:从端点看不清楚,但如果您从中获取单个数据元素,则可以:
store the data doing setUserData([json])
, this is perfectly fine and correct.存储执行
setUserData([json])
的数据,这是完全正确的。 You could also create the array first then push the data but that is really just making the code longer.您也可以先创建数组,然后推送数据,但这实际上只会让代码变长。
Change how you store the data as you don't have an array of elements so you can do this instead:改变你存储数据的方式,因为你没有元素数组,所以你可以这样做:
const App = ()=>{
const url = "https://jsonplaceholder.typicode.com/users/1";
const [userData, setUserData] = useState<Data | undefined >(undefined);
const getUserData = async () => {
let response = await fetch(url);
let json = await response.json();
setUserData(json);
};
useEffect(() => {
getUserData();
}, []);
return (
<div>
<h2>User Data</h2>
<div>
{userData ? (<div>
<strong>Name: </strong>
{userData.name}
<strong>Website: </strong>
{userData.website}
<strong>Email: </strong>
{userData.email}
<strong>Phone: </strong>
{userData.phone}
</div>
) : null
}
</div>
</div>
)
}
Old answer to previous version of the question以前版本问题的旧答案
If json has the shape Data[]
(ie returns multiple objects) you just need to do setUserData(json)
.如果 json 的形状为
Data[]
(即返回多个对象),您只需要执行setUserData(json)
。 no need to do a map to set the data on the state.无需执行 map 即可在 state 上设置数据。
If instead json has the shape Data
(ie returns a single object) then you need to set that object in an array before setting that to state. The more direct way is as you suggest at the end to use setUserData([json])
but you could also create the array first and push the data later to the array, something like this:相反,如果 json 具有形状
Data
(即返回单个对象),那么您需要在将其设置为 state 之前在数组中设置该 object。更直接的方法是您在最后建议使用setUserData([json])
但是您也可以先创建数组,然后将数据推送到数组,如下所示:
let json = data;
const dataArray = [];
dataArray.push(json);
setUserData(dataArray);
It would be better if you can be a bit more specific about::如果你能更具体一点就更好了::
.map
.map
有关
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.