javascript - ReactJS 在渲染状态下循环

Question

我在使用响应式投票按钮时遇到困难。我通过名为 users 的 ajax 调用返回的数组来检查用户已投票的内容。然后我循环遍历该数组，查看帖子 id 是否与该数组“users”中的任何元素匹配，这仅意味着他们对该帖子给予了“赞成”。我已经收到了 ajax 调用，但我使用

在渲染中映射我的帖子

render:function() {
   var users = this.props.users;
   var upvoted = this.props.users.upvoted;
   return(
      <div>
      <ul> 
         {
          this.props.posts.map(function(post) {
            //check for array and post id match here
            for ( var i = 0; i < upvoted.length; i++) {
               if(upvoted[i] == post._id){
                console.log("hit upvote! " + post._id);
                var style = { color: 'rgb(0, 255, 0)'};
            }
            else {
                var style = { color : 'rgb(64, 77, 91)'}
                console.log("miss upvote! " + post._id);
            }
         } 
            }
            return(
            <div id = {post._id}>
            //do post stuff here
            <span className = "up arrow" onClick = {updateUpvotesAndArrowColor()} style = {style}></span>
            <p>{post.body}</p>
           </div>
           )
          })
         }
          </ul>
          </div>

但是，由于它在我的渲染方法中，每次在数组“user”上触发 setState 时，它​​都会执行 for 循环。如果我的网页上有三个帖子被点赞，我的 user.upvoted 数组将填充这三个 id，但最终结果只会将该点赞数组的点赞按钮中的最后一个元素突出显示为绿色。

在控制台中登录后，这里是一个例子，页面上有 4 个帖子，我相信总共有 8 个调用(在设置用户状态之前有 4 个，我认为在设置之后有 4 个......)

posts.jsx:207 hit upvote! 559ae6fe236c0e88059cb1ce
posts.jsx:207 miss upvote! 559ae6fe236c0e88059cb1ce
posts.jsx:207 miss upvote! 559ae805f6b34cfc13e998ff
posts.jsx:202 hit upvote! 559ae805f6b34cfc13e998ff
2 posts.jsx:207 miss upvote! 559ae731236c0e88059cb1d0
2 posts.jsx:207 miss upvote! 559ae6ee236c0e88059cb1cd

这是用户的upvote json:

upvoted: Array[2]
0: "559ae6fe236c0e88059cb1ce"
1: "559ae805f6b34cfc13e998ff"length: 2

最终结果仅突出显示已投票的[1]。有没有更好的方法来检查它们是否是我的 user.upvotedP 数组中的元素通过我拥有的映射函数进行投票？

Answer 1

你的逻辑不正确。您基本上是在测试数组中的 last 元素是否等于帖子 ID。但这只能适用于单个帖子。

您可以将 else 分支移到循环之前，以假设默认情况下该帖子不受欢迎。

但是，有一种更简单的方法来表达此逻辑:检查数组中是否存在 ID，使用 indexOf :

var style = {
  color: upvotes.indexOf(post._id) > -1 ? 'rgb(0, 255, 0)' : 'rgb(64, 77, 91)'
};