Question

我正在尝试编写一个将特定对象保存在用户单击的数组中的函数，我不确定如何从对象中获取所需数据

这是目前的功能：

saveArticle = event => {

    const userId = localStorage.getItem("userId")
    event.preventDefault();
    const article = {
      title: this.title,
      summary: this.summary,
      link: this.link,
      image: this.image,
      userId: userId
    }
    console.log(article)
    // API.saveArticle()
  }

这是我通过数组映射的组件

const articleCard = props => {
    const { classes } = props
    return (
        <div>
            {props.articles.map((article, i) => {
                console.log(article);
                return (
                    <div key={i}>
                    <Card className={classes.card}>
                        <CardActionArea>
                            <CardMedia
                                className={classes.media}
                                image={article.image}
                                title={article.title}
                                href={article.link}
                            />
                            <CardContent>
                                <Typography gutterBottom variant="headline">
                                    {article.title}
                                </Typography>
                                <Typography component="p">
                                    {article.summary}
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                        <CardActions>
                            <Button href={article.link} size="small"                                      color="primary">
                                Read Article
                            </Button>
                            <Button onClick={props.saveArticle} size="small"                               color="primary">
                                Favorite
                            </Button>
                        </CardActions>
                    </Card>
                    </div>
                )
            })}
        </div>
    )
}

我似乎无法抓住我想要获得的对象属性，而且我也很迷失！

任何帮助，谢谢大家！

Answer 1

尝试一下

<Button onClick={(e) => props.saveArticle(article, e)} size="small" color="primary">
    Favorite
</Button>

和

 saveArticle = (article, event) => {
    const userId = localStorage.getItem('userId');
    event.preventDefault();
    const article = {
      title: article.title,
      summary: article.summary,
      link: article.link,
      image: article.image,
      userId: userId
    };
    console.log(article);
    // API.saveArticle()
  };

参考：Passing Arguments to Event Handlers

从映射数组React.js抓取对象

1 个答案: