尝试在p5.js中调用多行字符串时出现TypeError

Question

我一直在尝试制定一种解决方案，以采用单行句子（在我的代码中称为“语句”）并将其在我的草图上变成多行句子。 这个问题与我在SO上发布的另一个问题直接相关，因此我被要求将此新问题发布为新问题。 @KevinWorkman的解决方案使我明白了这一点。 不过，发生的是我遇到TypeError: Cannot read property 'display' of undefined尝试运行程序时TypeError: Cannot read property 'display' of undefined 。 草图已加载，但是当我在草图中单击以开始动画时，出现该错误。 我认为这是因为我原来的statements[]数组现在不再是可以在我的draw()函数中调用的类型。 但是我不了解问题到底是什么，我已经查看了所有的JS和p5.js参考文献，但是找不到解决方案。

我正在发布我的完整代码，以提供一个最小，完整，可验证的示例。 尽管事实如此，但作为作家，我发现“最小”和“完整”是相互矛盾的术语，因此，非常令人困惑，这是：

var clContext;
var speed = 0.8;
var statements = [];
var canvas;

//load the table of Clinton's statements and their polarity
function preload() {
  clContext = loadTable("cl_context_rev.csv", "header");
}

function setup() {
  canvas = createCanvas(680, 420);
  canvas.mousePressed(inWidth);
  background(51);
  noStroke();
  // iterate over the table rows called in 'preload()' from .csv file
  for (var i = 0; i < clContext.getRowCount(); i++) {
    var statement = clContext.get(i, "statement");
    var polarity = clContext.get(i, "polarity");
    }
    statements[i] = new Statement(polarity, statement);
  }

function draw() {
  if (mouseIsPressed) {
    background(51);
    for (var i = 0; i < statements.length; i++) {
      statements[i].display();
    }
  }
}

// Function to align statements, categories, and polarity
function Statement(polarity, statement) {
  // Break up single-line statements in order to display as multiline
  this.statement = split(statement, "<br>");
  this.polarity = polarity;
  this.x = random(width);
  this.y = random(height);
  this.dx = random(-speed, speed);
  this.dy = random(-speed, speed);
}
// Attach pseudo-class methods to prototype;
// Maps polarity to color and x,y to random placement on canvas
Statement.prototype.display = function() {
  this.x += this.dx;
  this.y += this.dy;

// Make statements reappear if they move off of the sketch display
  if(this.x > width+10){
    this.x = -10
  }
  if(this.y > height+10) {
    this.y = -10
  }
// Map positive/negative statements to colors
  if(this.polarity == -1){
    fill(229,121,59);
  }
  else if(this.polarity == 1){
    fill(97,93,178);
  }
  textSize(14);
  // Was directed to add both 'text' statements
  text(this.statement[0], this.x, this.y);
  text(this.statement[1], this.x, this.y+25);
}

// Create functions for hiding and showing statements
function inWidth() {
  width = width+5;
};  

注意：

console.log(typeof this.statement[0])  // returns 'undefined'
console.log(typeof this.statement[1])  // returns 'undefined'
console.log(split(statement, "<br>"))  // returns 'undefined'  

console.log(statements) // returns 'object'
console.log(statements.length) // returns 20

Answer 1

 for (var i = 0; i < clContext.getRowCount(); i++) {
  var statement = clContext.get(i, "statement");
  var polarity = clContext.get(i, "polarity");
 }
 statements[i] = new Statement(polarity, statement);

我认为这里的最后一行应该在for循环内，以便执行您想要的操作。

您的错误意味着您试图在未定义的值上调用display（）方法。 循环语句数组时，调用display（）方法的唯一位置是在draw（）函数内部。 这意味着您的语句数组有时包含一个未定义的值。 您可以通过控制台记录阵列来验证这一点。

我怀疑为什么有未定义的值，是因为当您尝试填充setup（）函数中的statements数组时，在for循环完成之后，仅调用statements[i] =一次。 在这一点上， i的值与for循环结束时的值相同，因此，您的statement数组将成为一个数组，其中第i个元素就是您设置的任何元素，所有先前的元素均未定义。

正确的代码：

 for (var i = 0; i < clContext.getRowCount(); i++) {
  var statement = clContext.get(i, "statement");
  var polarity = clContext.get(i, "polarity");
  statements[i] = new Statement(polarity, statement);
  // OR statements.push(new Statement(polarity, statement));
 }

作为通用的JavaScript编码样式原则，对Array.push（）也是一个好主意，而不是直接分配以将项目添加到数组中。

Answer 2

马尔顿的答案是正确的。 我对此表示赞同，我认为您应该接受。 但是我会尝试扩展它，因为我不确定您是否了解它的意思。

让我们看一下这些行：

for (var i = 0; i < clContext.getRowCount(); i++) {
    var statement = clContext.get(i, "statement");
    var polarity = clContext.get(i, "polarity");
}
statements[i] = new Statement(polarity, statement);

请使用一些示例数据遍历此代码。 假设您有3行。

• 第一次运行循环时， i为0 。 您得到一个statement和一个polarity ，但您对它们不做任何事情。
• 第二次运行循环时， i为1 。 您得到一个statement和一个polarity ，但您对它们不做任何事情。
• 第三次运行循环， i是2 。 您得到一个statement和一个polarity ，但您对它们不做任何事情。
• 然后循环退出。 statement和polarity变量超出范围，因此undefined 。 与i变量相同。

基本上，该循环不执行任何操作。 然后我们到达这一行：

statements[i] = new Statement(polarity, statement);

但是我们知道i ， polarity和statement是未定义的，所以您真正在做的是：

statements[undefined] = new Statement(undefined, undefined);

您说此用法有效，但我对此表示高度怀疑。 您在这里所做的事情没有任何意义。 该语句肯定属于for循环，在我对您的其他问题的回答中也是如此 。

但是现在有了它，除了未定义索引处的内容外，什么都没有添加到数组中。 因此，我们进入了这一行：

for (var i = 0; i < statements.length; i++) {
  statements[i].display();
}

现在，我打赌statements.length为1，因为您在一个未定义的索引处有某些内容（也许该索引是i的最后一个值，我不知道）。 但是，您肯定在索引0处没有任何内容。 因此，当您进入此循环时， i为0 ，但该索引上没有任何内容。 换句话说， statements[0]是未定义的。 因此，内线确实在这样做：

undefined.display();

这就是导致您出错的原因。 解决第一个问题将摆脱此错误，因为实际上您将在数组中添加内容。

另外，请注意以下几行：

// Was directed to add both 'text' statements
  text(this.statement[0], this.x, this.y);
  text(this.statement[1], this.x, this.y+25);

我给您的这段代码只是一个例子。 您将不得不在这里做一些更明智的事情。 我只是向您展示了如何访问statement数组的两个索引。 您实际上必须检查此数组的长度，并循环遍历句子以执行某些操作。 那完全取决于您要发生的事情。

关于常规调试

您似乎遇到了很多问题，因为您试图同时进行所有操作。 如果您开始小批量工作，将为您省去很多麻烦。 与其尝试向大型主草图中添加此功能，不如不尝试使较小的示例草图首先工作？ 尝试对值进行硬编码，以便您可以准确了解split()函数的情况。 使用println()语句了解正在发生的事情。 一次添加所有内容对于您和我们来说都是令人困惑的。

请注意，这并不是对MCVE的要求（因为您上次提到它很生气），但是说实话，您可以做的最好的事情就是以较小的步骤开始工作。

您可能还考虑切换到常规处理（Java模式），因为它可以为您提供有关此类错误的更多信息。

Answer 3

我终于可以对代码进行一些简单的更改来解决此问题。 一旦想到，它似乎就非常明显，以至于我不确定为什么花这么长时间才弄清楚。

我首先对setup()代码进行了更改：

function setup() {
  canvas = createCanvas(680, 420);
  canvas.mousePressed(inWidth);
  background(51);
  noStroke();
  // iterate over the table rows called in 'preload()' from .csv file
  for (var i = 0; i < clContext.getRowCount(); i++) {
    var statement = clContext.get(i, "statement");
    var polarity = clContext.get(i, "polarity");
    var stateSplit = split(statement, "<br>");            // split the statements in setup to avoid issues elsewhere
      for (var j = 0; j < stateSplit.length; j++) {
        var stateJoin = join(stateSplit, "\n");           // join the statements, inserting a line break, to make a new array
      statements[i] = new Statement(polarity, stateJoin); // put this in the for loop (per @marton)
    }
    }
}

然后，我修改了构造函数和原型显示函数，如下所示：

摆脱了这一点，因为它只破坏了语句，但没有加入它们：

  this.statement = split(statement, "<br>"); 

并将其替换为：

  this.stateJoin = stateJoin;                  

然后我摆脱了这些：

text(this.statement[0], this.x, this.y);
text(this.statement[1], this.x, this.y+25); 

并使用它来代替：

    text(this.stateJoin, this.x, this.y)              

瞧！ 感谢@marton和@KevinWorkman的建议。