defaultAnnotations Prop 仅在我对数据进行硬编码时才有效 - React Annotation Tool答案

【问题标题】：defaultAnnotations Prop only working when I hard-code the data - React Annotation TooldefaultAnnotations Prop 仅在我对数据进行硬编码时才有效 - React Annotation Tool
【发布时间】：2020-05-20 00:07:43
【问题描述】：

我正在制作一个使用React Annotation Tool 的网络应用程序。我将绘制的数据存储在 mongoDB 数据库中，其架构是：

const VideoSchema = new Schema({
  drawnData: {
    type: Schema.Types.Mixed,
    required: true,
  },
})

我尝试将保存的数据传递到 defaultAnnotation 道具，但它没有显示绘制的矩形；但是，如果我对数据进行硬编码并按原样传递，则视频会完美地显示绘制的数据，如下所示：

let oo = [ // hard coding the data
      {
        color: "rgba(0, 0, 0, 1)",
        incidents: [
          {
            x: 184.25,
            y: 80,
            width: 99,
            height: 105,
            time: 0,
            status: "Show",
            id: "kacb6zeg",
            name: "kacb6zeg",
            label: "",
          },
        ],
        childrenNames: [],
        parentName: "",
        id: "kacb6zeg",
        name: "kacb6zeg",
        label: "1",
      },
    ];

    return (
      <div>
        <h1>Main Implementation</h1>
        <TwoDimensionalVideo // this implementation works
          url={video}
          defaultAnnotations={oo}
          onSubmit={(e) => this.submit(e)}
        />
        <TwoDimensionalVideo // this does not work
          url={video}
          defaultAnnotations={
            this.state.ready ? this.state.defaultAnnotations : []
          }
        />
      </div>
    );

这就是我在状态对象中存储数据的方式：

    const response = await fetch("/getData");
    const json = await response.json();

    this.setState({ defaultData: json.data[0].drawnData.data }, () => {
      console.log(this.state.defaultData[0]);
      this.defaultAnnotations = this.state.defaultData[0];
      this.setState({
        defaultAnnotations: this.defaultAnnotations,
        ready: true,
      });
    });

这就是我将数据插入数据库的方式：

submit(e) {
    this.filterData(e);
  }

  filterData(data) {
    this.insertVideoData(data.annotations);
  }

  async insertVideoData(data) {
    // console.log(data);
    this.options.body = JSON.stringify({ data });

    const response = await fetch("/insertData", this.options);
    const res = await response.json();

    if (res.message !== "Not Inserted") {
      alert("Data Inserted");
    } else {
      alert("some problem");
      console.log(res);
    }
  }

硬编码数据直接取自我的数据库，如果我使用 console.log 显示它就是这样。这可能证明数据结构不是问题。

有人能指出我正确的方向吗？另外，我是新手，所以请原谅垃圾代码。

【问题讨论】：

标签： javascript node.js reactjs mongodb

【解决方案1】：

好的，所以我发现了问题。当我通过我的 API 插入它时，我正在创建一个数据对象。所以我改变了

this.options.body = JSON.stringify({ data });

到

this.options.body = JSON.stringify(data);

我也修改了渲染组件的方式，所以我改变了

<TwoDimensionalVideo // this does not work
          url={video}
          defaultAnnotations={
          this.state.ready ? this.state.defaultAnnotations : []
        }
     />

到

{this.state.tag}

并将状态对象更改为

this.setState({
    tag: (
            <TwoDimensionalVideo
            url={video}
            onSubmit={(e) => {this.submit(e)}
            defaultAnnotations={json.data[0].drawnData}}
            />
        ),
})

在componentDidMount函数中

【讨论】：