英文:
How to render an array of images in Typescript?
问题
以下是要翻译的内容:
I have an array of objects. Each object has two properties: The first one is a string and the second one is an array of urls. this is an example of the json that I am working with:
{
data : [ {contentString : "eating sushi", ["url", "url", "url"] },... ]
}
I want to use a FlatList to render each url in an Image component. However, in visual studio code I find that the property source in the Image component is undelined and displays the following error:
Type '{ uri: IUrl; }' is not assignable to type 'ImageSourcePropType | undefined'.
Types of property 'uri' are incompatible.
Type 'IUrl' is not assignable to type 'string'.
As I understand, url is indeed a string because, as shown in the code below, the interface IUrl defines its data type as a string so I can not see why I am getting this error.
This is my code:
const Dashboard: React.FC <DashScreenProps> = (props) => {
//interfaces
//As mentioned above url is a string
interface IUrl{
url : string
}
interface IPost{
contentString : string
urls : IUrl[]
}
//local state variables
const [arrayOfPosts, setArrayOfPosts] = useState<IPost[]>([])
const getPostsFromFollowingUsers = async():Promise<boolean>=>{
try {
const response = await fetch(REMOTE_SERVER+`/userPost/getPostsFromFollowingUsers/${id}`)
const parseResponse = await response.json()
console.log('those are the posts', parseResponse)
setArrayOfPosts(parseResponse.data)
} catch (error) {
console.log(error)
}
}
useEffect(()=>{
getPostsFromFollowingUsers()
},[])
return(
<View>
{arrayOfPosts.map(post=>{
//{contentString, urls}
return(
<FlatList
data={post.urls}
renderItem={({item}) => {
return (
<Image source={{ uri: item }} style={{ width: 50, height: 50 }} />
)
}}
/>
)
})}
</View>
)
}
export default Dashboard
英文:
I have an array of objects. Each object has two properties: The first one is a string and the second one is an array of urls.
this is an example of the json that I am working with:
{
data : [ {contentString : "eating sushi", ["url", "url", "url"] },... ]
}
I want to use a FlatList to render each url in an Image component. However, in visual studio code I find that the property source in the Image component is undelined and displays the following error:
Type '{ uri: IUrl; }' is not assignable to type 'ImageSourcePropType | undefined'.
Types of property 'uri' are incompatible.
Type 'IUrl' is not assignable to type 'string'.
As I understand, url is indeed a string because, as shown in the code below, the interface IUrl defines its data type as a string so I can not see why I am getting this error.
This is my code:
const Dashboard : React.FC <DashScreenProps>= (props)=>{
//interfaces
//As mentioned above url is a string
interface IUrl{
url : string
}
interface IPost{
contentString : string
urls : IUrl[]
}
//local state variables
const [arrayOfPosts, setArrayOfPosts] = useState<IPost[]>([])
const getPostsFromFollowingUsers = async():Promise<boolean>=>{
try {
const response = await fetch(REMOTE_SERVER+`/userPost/getPostsFromFollowingUsers/${id}`)
const parseResponse = await response.json()
console.log('those are the posts', parseResponse)
setArrayOfPosts(parseResponse.data)
} catch (error) {
console.log(error)
}
}
useEffect(()=>{
getPostsFromFollowingUsers()
},[])
return(
<View>
{arrayOfPosts.map(post=>{
//{contentString, urls}
return(
<FlatList
data = {post.urls}
renderItem={({item}) => {
return (
<Image source={{ uri: item }} style={{ width: 50, height: 50 }} />
)
}}
/>
)
})}
</View>
)
}
export default Dashboard
答案1
得分: 0
尝试更改您的 IPost
接口声明:
interface IPost {
contentString: string;
urls: string[];
}
英文:
Try to change your IPost
interface declaration:
interface IPost{
contentString : string
urls : string[]
}
答案2
得分: 0
你正在提取错误的键数据 post.urls,urls 在给定的数据中不存在,而且数据是对象类型,而不是数组,.map 只在数组的情况下运行
{
data: [{ contentString: "eating sushi", ["url", "url", "url"] }, ...]
}
使用以下数据,一切都会正常工作
[
{
contentString: "eating sushi",
url: [
"https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516__340.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbJVpOdtk96FIiNKr9o2eVdz6pebpXb2n3UO6MjRDGABy-1EoDIjhwog9ACA7ez0RYH7Q&usqp=CAU",
"https://cdn.xxl.thumbs.canstockphoto.com/test-concept-picture_csp17279717.jpg"
]
}
]
或者尝试更改你的 IPost 接口声明:
interface IPost {
contentString: string;
urls: string[]; // 此处类型错误
}
英文:
You are fetching the wrong key data post.urls urls not exist in the given data also the data is an object type not an array in the .map only runs in case of an array
{
data : [ {contentString : "eating sushi", ["url", "url", "url"] },... ]
}
Use this data then everything will be working fine
[
{
contentString: "eating sushi",
url: [
"https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516__340.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbJVpOdtk96FIiNKr9o2eVdz6pebpXb2n3UO6MjRDGABy-1EoDIjhwog9ACA7ez0RYH7Q&usqp=CAU",
"https://cdn.xxl.thumbs.canstockphoto.com/test-concept-picture_csp17279717.jpg"
]
}
]
or Try to change your IPost interface declaration:
interface IPost{
contentString : string
urls : string[] // wrong type here
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论