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

Question

I am trying to write a function that will save a specific object in an array that the user will click I am unsure of how to grab the data I need from the object

this is the function at the moment:

 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() } 

and this is the component where I map through the array

 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> ) } 

I cant seem to grab the objects properties that I'd like to get and I am pretty lost as too how!

any help would be much appreciated thanks guys!

Answer 1

Try this

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

and

 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()
  };

---

Reference: Passing Arguments to Event Handlers