时间戳

首页 > 解决方案 > 将 api 调用中的道具发送到另一个反应组件时遇到问题

javascript - 将 api 调用中的道具发送到另一个反应组件时遇到问题

问题描述

好的，所以我想对我的 GraphQL 后端进行 API 调用，以获取我想以卡片形式在 React 前端显示的一系列活动。当我进行 API 调用以获取所有广告系列时，我得到以下响应：

{data: {campaigns: [{id: "1", title: "Lucky's Gaming Services",…}]}}
  data: {campaigns: [{id: "1", title: "Lucky's Gaming Services",…}]}
    campaigns: [{id: "1", title: "Lucky's Gaming Services",…}]
     0: {id: "1", title: "Lucky's Gaming Services",…}
       body: "Lucky is opening a gaming service online which allows users to repair gaming 
             consoles"
       campaignType: "FC"
       couponPrice: 5
       couponsCount: 4
       creator: {id: "3", username: "test1", __typename: "UserModel"}
       id: "1"
       slug: "luckygamingservices12"
       title: "Lucky's Gaming Services"
       __typename: "CampaignModel"

目前，活动数组只有 1 个活动，如上所示。每个广告系列都有一些属性，例如 body、id、title、slug 等。

在我的反应页面上，我基本上拨打电话以获取此响应，然后在主页上使用以下代码处理它：

           {loading ? ( <h1>Loading Campaigns...</h1>
            ) : (
              data && data.campaigns.map(campaign => (
                <Grid item xs={12} sm={6} md={4} key={campaign.id}>
              <Card campaign={campaign} multiple={true}/>
              </Grid>
              ) )
            )}

上面我将活动传递给 Card 组件

在卡片组件上，我如何导入每个活动的属性，例如正文、标题、ID 等，以便我可以显示数组中每个活动卡片的信息。

export default function Card(props) {
    const classes = useStyles();
    return (
        <>
             <Card className={classes.root}>
                        <CardActionArea>
                            <CardMedia
                            className={props.multiple ? classes.mediaMultiple : classes.media}
                            image="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9"
                            title="Contemplative Reptile"
                            />
                            </CardActionArea>
                            <CardContent>
                            {props.multiple ? <Box color="#8f8f8f" mb={2} mt={0.5} fontSize={14}>Grund</Box>:
                            <Typography gutterBottom variant="h5" component="h1">
                                CAMPAIGN TITLE
                            </Typography>}
                            <Typography variant="body2" color="textSecondary" component="p">
                                CAMPAIGN BODY
                            </Typography>
                            </CardContent>
                        
                        </Card>
        </>
    )
}

以前当我这样做时它起作用了：

export default function Card({campaign: {body, id, couponPrice, couponsCount, slug, title, campaignType, creator}}) {

我收到此错误：TypeError：无法读取未定义的属性“正文”

如何将主页中的属性/道具传递到卡片组件中？它以前工作得很好，但我不知道为什么不能了:(

标签： javascriptarraysreactjsfrontendweb-component

解决方案

I see that you're passing campaign as a prop and then on your <Card /> component you are grabbing the props as an argument however I don't see anywhere that you are assigning body to a variable for use.

You could try iterating over the props by adding the following...

const classes = useStyles();
const {body, id, couponPrice, couponsCount, slug, title, campaignType, creator} = props;

From there each of those should be saved to a const that you can use throughout your <Card /> component. For instance you should be able to place {body} where you want it to appear.

推荐阅读