將 api 調用的道具發送到另一個反應組件時出現問題

Question

好的，所以我想對我的 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 個活動，如上所示。 每個廣告系列都有正文、id、標題、slug 等屬性。

在我的 React 頁面上，我基本上是通過調用來獲取此響應，然后在主頁面上使用以下代碼處理它：

           {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：無法讀取未定義的屬性'body'

如何將屬性/道具從主頁傳遞到 Card 組件？ 它以前工作正常，但我不知道為什么不再:(

Answer 1

我看到您將campaign作為道具傳遞，然后在您的<Card />組件上您將props作為參數獲取，但是我沒有看到任何地方將body分配給變量以供使用。

您可以嘗試通過添加以下內容來遍歷道具...

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

從那里，每一個都應該保存到一個const中，您可以在整個<Card />組件中使用它。 例如，你應該能夠將{body}放在你希望它出現的地方。