Question

当前正在建立一个人们能够收藏文章的网站。我认为检查文章是否已被收藏的最好方法是使用map语句。但是，它为循环中的每次迭代都返回一条语句，这显然是我所不想要的。我想要它做的是如果它在数组中做一件事，如果它不在数组中则做另一件事。我希望它基本上在数组中找到一个匹配项，然后说“您已经喜欢这篇文章”，我的代码也是如此。但是，它然后返回数组中每个项目的else语句。

我正在寻找的是这个。项目在数组中吗？如果是，请禁用“收藏夹”按钮。如果项目在数组中不匹配，则启用按钮。这是我到目前为止的内容：

         { this.props.isAuthenticated ? 
                <React.Fragment>
                {this.props.user.liked_articles.map(liked => {
                    if(liked.fav_title === data.title){
                        return(
                            <React.Fragment>You have already Liked this Article</React.Fragment>
                        )
                    } else {
                        return(
                            <React.Fragment>
                            <TextField 
                            name="reasons_liked"
                            placeholder="Reasons Liked"
                            className={classes.textField}
                            variant="outlined"
                            />      

                            <Button
                            type='submit'
                            >Like Article</Button>
                            </React.Fragment>
                        )
                    }
                } )}

Answer 1

因此，如果我正确理解了您的问题，则map并不是您所需要的，因为它本身会返回一个数组。相反，您想使用类似some的东西。

{this.props.user.liked_articles.some(liked => liked.fav_title === data.title)
  ? <React.Fragment>You have already Liked this Article</React.Fragment>
  : (
    <React.Fragment>
      <TextField 
        name="reasons_liked"
        placeholder="Reasons Liked"
        className={classes.textField}
        variant="outlined"
      />      
      <Button
        type='submit'
      >Like Article</Button>
    </React.Fragment>
  )
}

如果data.title与liked_articles数组中的至少一个标题匹配，则条件返回true。

内联映射语句React

1 个答案: