使用 find 返回未定义？

Question

几天后，我的项目基础突然崩溃了，我完全不知道为什么。如果有人对这里发生的事情有任何见解，我很想知道。

我将线段的数据保存到 localStorage，使用以下代码将其从存储中提取并将其传递给 load 方法以将其显示在画布上。

    const graphString = localStorage.getItem('graph');
    const graphInfo = graphString ? JSON.parse(graphString) : null;
    const graph = graphInfo ? Graph.load(graphInfo) : new Graph();

然后在 graph.js 中，执行逻辑来处理序列化并重新引入点和线段之间的上下文关系。

    class Graph {
      constructor(points = [], segments = []) {
        this.points = points;
        this.segments = segments;
      }

      static load(info) {
        const points = info.points.map((i) => new Point(i.x, i.y));
        console.log('Points:', points);

        const segments = info.segments.map((i) => {
            const p1 = points.find((p) => p.equals(i.p1));
            const p2 = points.find((p) => p.equals(i.p2));

            console.log('i.p1:', i.p1, 'Found p1:', p1);
            console.log('i.p2:', i.p2, 'Found p2:', p2);

            return new Segment(p1, p2);
        });

        console.log('Segments:', segments);

        return new Graph(points, segments);
      }
    ...snip...

    equals(point) {
      return this.x === point.x && this.y === point.y;
    }

来自 localStorage 的数据，作为参数“info”传递

    Points: (2) [Point, Point]
      0: Point {x: 203, y: 413}
      1: Point {x: 199, y: 202}

这是控制台日志的输出

    i.p1: {x: 316, y: 414} Found p1: undefined
    i.p2: {x: 203, y: 413} Found p2: Point {x: 203, y: 413}
    i.p1: {x: 203, y: 413} Found p1: Point {x: 203, y: 413}
    i.p2: {x: 199, y: 202} Found p2: Point {x: 199, y: 202}

    Segments:(2) [Segment, Segment]
      0: Segment {p1: undefined, p2: Point}
      1: Segment {p1: Point, p2: Point}

有人知道为什么会发生这种情况吗？

我有点疯了，为什么几天后它突然崩溃了，没有任何解释。

目前我正在探索其他选项来访问数据而不使用 find()。

Answer 1

所以我尝试处理数据，但现在它抛出一个与点和/或段相关的错误。

此更改现在将数据点渲染到画布，但无法加载所有点/段。

我可以创建 1 个新点/段，然后它开始出错 point.draw 不是一个函数，并且不会附加该段的终点。

toJSON() {
  return { points: this.points, segments: this.segments };
}

static fromJSON(data) {
  return new Graph(data.points, data.segments);
}

static reviver(key, value) {
  return (key === "") ? new Graph(value.points, value.segments) : value;
}

static load() {
  const data = JSON.parse(localStorage.getItem('graph'), Graph.reviver);

  if (!data || !Array.isArray(data.points) || !Array.isArray(data.segments)) {
    console.error('Invalid or missing data in localStorage.');
    return null;
    }

  const points = data.points.map((pointData) => new Point(pointData.x, pointData.y));

  const segments = data.segments.map((segmentData) => {
    const p1 = points.find((p) => p.equals(segmentData.p1));
    const p2 = points.find((p) => p.equals(segmentData.p2));

    if (p1 && p2) {
      return new Segment(p1, p2);
    } else {
      console.error('Invalid segment data:', segmentData);
      return null;
    }
  });

    // Filter out null segments if any (due to errors in data)
  const validSegments = segments.filter((segment) => segment !== null);

  return new Graph(points, validSegments);
}