我找不到为什么我不能将数据传递给道具
2019-08-11
77
我找不到为什么我不能将数据传递给 props
在 index.js 的 Home 组件中将 props 数据传递给 PostCard 组件。 PostCard 使用此来设置属性值。
但是发生了错误。
TypeError: Cannot read property 'nickname' of undefined
PostCard
./components/PostCard.js:19
16 | extra={<Button>팔로우</Button>}
17 | >
18 | <Card.Meta
> 19 | avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
| ^ 20 | title={post.User.nickname}
21 | description={post.content}
22 | />
我不知道为什么会发生此错误
index.js
import React from 'react';
import { Form, Input, Card, Icon, Button, Avatar } from 'antd'
const PostCard = (post) => {
return (
<Card
key={+post.createdAt}
cover={post.img && <img src={c.img} alt="example" />}
actions={[
<Icon type="retweet" key="retweet" />,
<Icon type="heart" key="heart" />,
<Icon type="message" key="message" />,
<Icon type="ellipsis" key="ellipsis" />
]}
extra={<Button>팔로우</Button>}
>
<Card.Meta
avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
title={post.User.nickname}
description={post.content}
/>
</Card>
);
};
export default PostCard;
PostCard.js
import React from 'react';
import { Form, Input, Card, Icon, Button, Avatar } from 'antd'
const PostCard = (post) => {
return (
<Card
key={+post.createdAt}
cover={post.img && <img src={c.img} alt="example" />}
actions={[
<Icon type="retweet" key="retweet" />,
<Icon type="heart" key="heart" />,
<Icon type="message" key="message" />,
<Icon type="ellipsis" key="ellipsis" />
]}
extra={<Button>팔로우</Button>}
>
<Card.Meta
avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
title={post.User.nickname}
description={post.content}
/>
</Card>
);
};
export default PostCard;
这是一个基本的疑问 但是我自己找不到错误的原因。 是 props 格式错误吗? 我仔细看也找不到原因 非常感谢您告诉我如何修复此问题。
1个回答
不要这样做,
const PostCard = (post) => {
你需要解构
props
,例如,
const PostCard = ({post}) => { //Notice the cruly braces
ravibagul91
2019-08-11