Javascript 在Meteor上使用ReactiveVar时，等待Blaze的数据

我在Meteor.js中的Blaze模板上遇到了一个奇怪的问题。下面的模板被渲染四次（使用

{{{each}}

操作符）

{{name}}

数据作为保存对象数组的ReactiveVar传递给模板。每个对象在模板上渲染一个圆。生成此数据的逻辑如下所示：

const colorSet = ['red','gold','blue','green','orange','turquoise','wheat','fuchsia','purple'];
const colorNames = ['VERMELHO','AMARELO','AZUL','VERDE','LARANJA','TURQUESA','BEGE','ROSA','ROXO'];

var limit = colorSet.length;

// helper functions
function getRandomPosition() {
  return Math.floor(Math.random() * (limit + 1));
}

function getRightColor() {
  let position = getRandomPosition();
  let rightColor = {
    color: colorSet[position],
    name: colorNames[position],
    right: 'right-option',
  };
  return rightColor;
}

function getWrongColor() {
  let position1 = getRandomPosition();
  let position2 = getRandomPosition();
  while (position1 === position2) {
    position2 = getRandomPosition();
  }
  let wrongColor = {
    color: colorSet[position1],
    name: colorNames[position2]
  };
  return wrongColor;
}

function make4Circles() {
  let circles = [];
  circles.push(getRightColor());

  for (let i = 0; i < 3; i++) {
    circles.push(getWrongColor());
  }
  console.log('circles:', circles)
  return circles
}

////
// TEMPLATE HELPERS
///
Template.gameArea.onCreated(function () {
  this.circleArray = new ReactiveVar(make4Circles());
})


Template.gameArea.helpers({
  circles () => {
    return Template.instance().circleArray.get();
  }
})

const colorSet=[‘红色’、‘金色’、‘蓝色’、‘绿色’、‘橙色’、‘绿松石’、‘小麦’、‘紫红色’、‘紫色’]；
const colorNames=['VERMELHO'，'AMARELO'，'AZUL'，'VERDE'，'LARANJA'，'TURQUESA'，'BEGE'，'ROSA'，'ROXO']；
var limit=colorSet.length；
//辅助函数
函数getRandomPosition（）{
返回Math.floor（Math.random（）*（limit+1））；
}
函数getRightColor（）{
让位置=getRandomPosition（）；
设rightColor={
颜色：颜色集[位置]，
名称：colorNames[位置]，
右：'右选项'，
};
返回正确的颜色；
}
函数getErrorColor（）{
设position1=getRandomPosition（）；
设position2=getRandomPosition（）；
而（位置1==位置2）{
位置2=getRandomPosition（）；
}
让颜色错误={
颜色：颜色集[position1]，
名称：颜色名称[位置2]
};
返回错误颜色；
}
函数make4Circles（）{
设圆=[]；
circles.push（getRightColor（））；
for（设i=0；i<3；i++）{
circles.push（getErrorColor（））；
}
console.log（'circles:'，circles）
返回圈
}
////
//模板助手
///
Template.gameArea.onCreated（函数（）{
this.circleArray=new ReactiveVar（make4Circles（））；
})
Template.gameArea.helpers({
圆圈（）=>{
返回Template.instance（）.circleArray.get（）；
}
})

问题是页面有时缺少数据，这给我的印象是，模板是在数据准备好之前呈现的。由于blaze是被动的，我认为这不会发生，因为tracker会知道数据已经更改，并且会再次重新呈现模板。但事实是，有时它缺乏一些数据

我已经看了所有的文档，我不确定我是否面临某种错误或做了什么错误

---

如果有人想运行代码，可以在github repo上找到：

我怀疑问题不是来自Blaze，而是来自您的数据生成算法

您的

console.log（'circles:'，circles）

是否总是输出正确的数据

Math.floor（Math.random（）*（limit+1））

有时似乎会生成超出数组索引范围的整数

在您的情况下，

limit

将是9（即

colorSet

数组中的9个项目，因此索引从0到8），因此

limit+1

是10

然后

Math.random（）*10

上的

Math.floor

有时会给出9，这超出了数组范围

---

=>只要删除

+1

就可以解决您的问题。

谢谢@ghybs！这么愚蠢的错误。。。但有时候，当我们独自一人做事时，我们无法发现如此简单和微小的错误。

const colorSet = ['red','gold','blue','green','orange','turquoise','wheat','fuchsia','purple'];
const colorNames = ['VERMELHO','AMARELO','AZUL','VERDE','LARANJA','TURQUESA','BEGE','ROSA','ROXO'];

var limit = colorSet.length;

// helper functions
function getRandomPosition() {
  return Math.floor(Math.random() * (limit + 1));
}

function getRightColor() {
  let position = getRandomPosition();
  let rightColor = {
    color: colorSet[position],
    name: colorNames[position],
    right: 'right-option',
  };
  return rightColor;
}

function getWrongColor() {
  let position1 = getRandomPosition();
  let position2 = getRandomPosition();
  while (position1 === position2) {
    position2 = getRandomPosition();
  }
  let wrongColor = {
    color: colorSet[position1],
    name: colorNames[position2]
  };
  return wrongColor;
}

function make4Circles() {
  let circles = [];
  circles.push(getRightColor());

  for (let i = 0; i < 3; i++) {
    circles.push(getWrongColor());
  }
  console.log('circles:', circles)
  return circles
}

////
// TEMPLATE HELPERS
///
Template.gameArea.onCreated(function () {
  this.circleArray = new ReactiveVar(make4Circles());
})


Template.gameArea.helpers({
  circles () => {
    return Template.instance().circleArray.get();
  }
})