javascript - 内联映射语句React

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。