Question

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

在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;

这是一个基本问题但我自己找不到错误原因。道具格式不正确吗？即使我仔细观察也找不到原因非常感谢您告诉我如何解决此问题。

Answer 1

代替这样做，

const PostCard = (post) => {

您需要像这样破坏props

const PostCard = ({post}) => {   //Notice the cruly braces

Destructuring Props in React

我找不到为什么无法将数据传递给道具的原因

1 个答案: