Цикл ReactJS в состоянии рендеринга

im с трудностями с отзывчивой кнопкой upvote. Я проверяю, что пользователь дал upvote, чтобы массив возвращался из вызова ajax, называемого пользователями. Затем я просматриваю этот массив, чтобы увидеть, совпадает ли идентификатор сообщения с любым из элементов этого "пользователя" этого массива. Это означало бы, что они дали этому сообщению "верхнюю" позицию. Я получил 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>

Однако, поскольку он находится в моем методе рендеринга, он будет выполнять цикл for каждый раз, когда setState запускается в массиве "пользователь". Если у меня есть три должности, размещенные на моей веб-странице, мой массив user.upvoted будет заполнен этими тремя идентификаторами, однако в конечном итоге будет выделяться только последний элемент в этой кнопке upvoted array 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

Здесь находится пользовательский опрос пользователя:

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

Выделено только конечный результат [1]. Есть ли лучший способ проверить, являются ли они элементами моего массива user.upvotedP, с помощью функции отображения, которую я имею?