JS事件监听器变量失去价值？

Question

socket.on("upvote", function(data)
{
document.getElementById("main").innerHTML = "";
foodCount = data.slice(0);
for (var i = 0; i < foodCount.length; i++)
    {
        var div = document.createElement("div");
        div.style.width = "300px";
        div.style.height = "300px";
        div.style.backgroundColor = "red";
        div.style.margin = "10px";
        div.innerHTML = foodCount[i].name + " " + foodCount[i].location + " " + foodCount[i].deal + " " + foodCount[i].votes;
        console.log(foodCount[i]);
        div.addEventListener("click", function()
        {
            socket.emit("upvote", foodCount[i]);
        });
        document.getElementById("main").appendChild(div);   
    }

}）;

所以基本上，我在前端js文件上有一些代码，它创建一个div并添加一个click的事件监听器，并使用socket.io用foodCount [i]发出upvote事件。 foodCount是一个包含对象的数组，div事件监听器实际上正在为foodCount数组中的每个对象运行for循环。问题是，当我尝试使用say foodCount [i] .name访问后端套接字服务器上的foodCount [i]对象的属性时，它将显示为null。我不知道是不是因为我不能添加像这样或者什么的事件监听器，但数据会以某种方式丢失，有什么见解？

   socket.on("upvote", function(data)
{
    console.log(data);
    for (var i = 0; i < foodCount.length; i++)
        {
            if (foodCount[i].name == data.name)
                {
                    foodCount[i].votes++;
                }
        }

    io.sockets.emit("upvote", foodCount);
});

这是后端套接字服务器上的一些代码。如您所见，data参数是我从前端服务器（foodCount [i]）传递的特定对象，当我尝试在for循环中执行data.name时，我变为null。