FireStore错误:不支持"嵌套数组。FiRestore/p5.js问题

有人能帮我更好地理解此错误吗?我正在尝试使用p5.js和Firebase/Firestore来创建一个站点,在该站点中,您可以在画布上绘制某个东西,然后它会将图形保存到Firestore,但当我单击保存时,我收到以下错误:

错误.ts:166未捕获Firebase错误:使用无效数据调用了函数DocumentReference.set()。不支持嵌套数组

我到目前为止的代码:

var drawing = [];
var currentPath = [];
var isDrawing = false;

function setup() {
    canvas = createCanvas(400,400);
    canvas.mousePressed(startPath);
    canvas.parent('canvas');
    canvas.mouseReleased(endPath);
    var saveButton = select('#saveButton');
    saveButton.mousePressed(saveDrawing);
}

function startPath() {
    isDrawing = true;
    currentPath = [];
    drawing.push(currentPath);
}

function endPath() {
    isDrawing = false;
}

function draw() {
    background(0);

    if (isDrawing){
        var point = {
        x: mouseX,
        y: mouseY
        }
    currentPath.push(point);
    }

    stroke(255);
    strokeWeight(7);
    noFill();
    for (var i = 0; i < drawing.length; i++) {
        var path = drawing[i];
        beginShape();
        for (var k = 0; k < path.length; k++) {
            vertex(path[k].x, path[k].y)
        }
        endShape();
    }
}

function saveDrawing(){
    db.collection('joonistused').add({
        drawing: drawing
    });
    var result = ref.push(data, dataSent);
    console.log(result.key)

    function dataSent(status) {
        console.log(status);
    }
}

编辑:如何将数组中的图形坐标存储到FireStore?就像将我的图形保存到FireStore中?


解决方案

实际上,drawing是一个数组,其中直接项也是数组。由于一些技术限制,FireBase似乎不允许数组的数组。

这个similar question on StackOverflow的答案说明您仍然可以间接拥有数组的数组,如Troy Michael所述:

您可以修改一个序列化函数,将具有对象类型的数组转换为映射。键可以是数字以维护顺序。

即{1:对象,2:对象2...}

在反序列化时,您可以获取Object.Values(Data);以将其放回数组中以供客户端使用。

您可以这样做,或者简单地将子数组嵌套到对象中,其中drawing类似于[ { items: [ ... items of array ...] }, ... ]。请注意,现在drawing是一个对象数组,其中每个对象都有一个名为items的字段,这是一个项数组。根据引用的问题,似乎可以绕过这个限制。

相关文章