Question

我对响应式upvote按钮有困难。我通过名为users的ajax调用返回的数组检查用户提供了什么。然后我循环遍历该数组以查看帖子ID是否与该数组中的任何元素匹配＆＃39;用户＆＃39;这只会意味着他们已经给了这个帖子一个'＃34; upvote＆＃34;。我已收到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>

然而，因为它在我的render方法中，所以每次在数组＆＃34; user＆＃34;上触发setState时它都会执行for循环。如果我在我的网页上有三个帖子，我的user.upvoted数组将填充这三个id，但最终结果只会突出显示该upvoted数组的upvote按钮中的最后一个元素绿色。

在控制台中记录它之后是一个例子，页面上有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

仅突出显示最终结果upvoted [1]。有没有更好的方法来检查它们是否是我的user.upvotedP数组中的元素是否支持我的映射函数？

Answer 1

你的逻辑错误。您基本上测试数组中的 last 元素是否等于帖子ID。但这只能适用于一个帖子。

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

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

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

ReactJS在渲染状态下循环

1 个答案: