开发者问题收集

我找不到为什么我不能将数据传递给道具

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

在 React 中解构 Props

ravibagul91
2019-08-11