完全錯誤：錯誤：物件作為 React 子項無效（找到：物件與鍵 {seconds, nanoseconds}）。如果您打算渲染一組子項，請改用陣列。
代碼： ...
const docRef = collection(db, 'posts')
const [docSnapshot] = useCollection(docRef)
...
{docSnapshot?.docs?.map((feed) => (
<Feed
key={feed.data().id}
navigation={navigation}
username={feed.data().username}
theme={feed.data().theme}
body={feed.data().body}
imagesURL={feed.data().imagesURL}
photoURL={feed.data().photoURL}
created_at={feed.data().created_at}
comments={feed.data().comments}
likes={feed.data().likes}
shares={feed.data().shares}
/>
))}
...
火力基地： 火力基地
喂養：
import React from 'react'
import { View } from 'react-native'
import styled from 'styled-components/native'
import {
Entypo,
AntDesign,
MaterialCommunityIcons
} from '@expo/vector-icons'
import { Avatar, Image } from 'react-native-elements'
import { TouchableOpacity } from 'react-native-gesture-handler'
const Container = styled.View`
flex: 1;
`
const Header = styled.View`
height: 50px;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 6px;
padding: 0 11px;
`
const Row = styled.View`
align-items: center;
flex-direction: row;
`
const User = styled.Text`
font-size: 12px;
font-weight: bold;
color: #222121;
`
const Time = styled.Text`
font-size: 9px;
color: #747476;
`
const Post = styled.Text`
font-size: 14px;
color: #222121;
line-height: 14px;
margin-top: 15px;
padding: 0 11px;
`
const Photo = styled.Image`
width: 100%;
height: 300px;
`
const Footer = styled.View`
padding: 0 11px;
`
const FooterCount = styled.View`
flex-direction: row;
justify-content: space-between;
padding: 9px 0;
`
const IconCount = styled.View`
background: #1878f3;
width: 20px;
height: 20px;
border-radius: 10px;
align-items: center;
justify-content: center;
margin-right: 6px;
`
const TextCount = styled.Text`
font-size: 11px;
color: #424040;
`
const Separator = styled.View`
width: 100%;
height: 1px;
background: #f9f9f9;
`
const FooterMenu = styled.View`
flex-direction: row;
justify-content: space-between;
padding: 9px 0;
`
const Button = styled.TouchableOpacity`
flex-direction: row;
`
const Icon = styled.View`
margin-right: 6px;
`
const Text = styled.Text`
font-size: 12px;
color: black;
`
const BottomDivider = styled.View`
width: 100%;
height: 9px;
background: #f0f2f5;
`
const addLike = () => {
}
const addShare = () => {
}
const Feed = ({ navigation, theme, username, body, comments, shares, likes, imagesURL, photoURL, created_at }) => {
return (
<>
<Container>
<Header>
<Row>
<TouchableOpacity onPress={() => navigation.navigate('UserScreen', {
userName: username
})}>
<Avatar
rounded
source={{
uri: photoURL
}}
/>
</TouchableOpacity>
<View style={{paddingLeft: 10}}>
<TouchableOpacity onPress={() => navigation.navigate('ThemeScreen', {
theme: theme
})}>
<User>{theme}</User>
</TouchableOpacity>
<Row>
<Text>{created_at}</Text>
<Entypo
name='dot-single'
size={18}
color='#747476'
/>
<TouchableOpacity onPress={() => navigation.navigate('UserScreen', {
userName: username
})}>
<Text>Posted by {username}</Text>
</TouchableOpacity>
</Row>
</View>
</Row>
<TouchableOpacity onPress={() => console.log('Dots')}>
<Entypo
name='dots-three-horizontal'
size={15}
color='#222121'
/>
</TouchableOpacity>
</Header>
<Post>{body}</Post>
{imagesURL?.map((imageURL) => (
<Photo resizeMode='contain' source={{uri: imageURL}} key={imageURL} />
))}
<Footer>
<Separator />
<FooterMenu>
<Button>
<Icon>
<AntDesign
name='like2'
size={20}
color='#424040'
/>
</Icon>
<TouchableOpacity onPress={() => addLike()}>
<Text>{likes} Likes</Text>
</TouchableOpacity>
</Button>
<Button>
<Icon>
<MaterialCommunityIcons
name='comment-outline'
size={20}
color='#424040'
/>
</Icon>
<TouchableOpacity onPress={() => navigation.navigate('PostScreen', {
username: username,
theme: theme,
body: body,
comments: comments,
photoURL: photoURL,
imagesURL: imagesURL,
shares: shares,
likes: likes,
created_at: created_at
})}>
<Text>{comments} Comments</Text>
</TouchableOpacity>
</Button>
<Button>
<Icon>
<MaterialCommunityIcons
name='share-outline'
size={20}
color='#424040'
/>
</Icon>
<TouchableOpacity onPress={() => addShare()}>
<Text>{shares} Shares</Text>
</TouchableOpacity>
</Button>
</FooterMenu>
</Footer>
<BottomDivider />
</Container>
</>
)
}
export default Feed
使用控制臺日志一切正常，我真的不知道
我不知道該寫什么我只需要能夠發布這個問題因為代碼太多所以我寫了這個毫無意義的文本
uj5u.com熱心網友回復：
<Text>{created_at}</Text>
created_at是一個物件（特別是Timestamp），所以你不能把它當作一個孩子。它具有可用于操作它的各種功能，例如，您可以執行以下操作：
<Text>{created_at.seconds}</Text>
或者
<Text>{created_at.toString()}</Text>
或者
<Text>{created_at.toDate().toLocaleTimeString()}</Text>
你可以做很多事情，這取決于你想展示什么。但是你不能顯示整個物件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/489320.html