javascript - 为什么我传入的数组中的道具分散到它包含的对象中？

Question

上下文：

我有一个使用 React 设置的网络项目。我的申请有 3 个阶段：

• 呈现组（带标题的文件夹）的原始视图。
• 每个组呈现他的孩子（它包含的图像）。
• 每个图像子渲染 iamge 和一些文本 + 标签

RoomListView具有状态并将其传递给RoomListViewGroup. 然后下一个组件从中获取标题并映射项目，RoomListViewGroupItem为每个项目创建一个视图（带有标题的图片等）。

问题发生在前两个组件之间。

问题：

我的状态RoomListView如下所示（示例数据 - 硬编码 - 无 api 调用）：

state = {
folders: [
  {
    title: "Wohnzimmer",
    items: [
      {
        img:
          "https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg",
        title: "Wand links Eingang",
        tags: ["Elektro"],
        folder: "Wohnzimmer"
      },
      {
        img:
          "https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg",
        title: "Wand rechts Eingang",
        tags: ["Wasser"],
        folder: "Wohnzimmer"
      }
    ]
  },
  {
    title: "Küche",
    items: [
      {
        img:
          "https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg",
        title: "Wand links Eingang",
        tags: ["Elektro"],
        folder: "Wohnzimmer"
      }
    ]
  }
]
};

我这样传递我的道具RoomListView：

renderFolders = () => {
return this.state.folders.map((folder, i) => {
  return (
    <RoomListViewGroup key={i} title={folder.title} items={folder.items} />
  );
});
};

所以我得到的错误如下：

无法读取未定义的属性“地图”。

所以我RoomListViewGroup像这样访问传入的道具：

renderDocs = () => {
console.log("this props are: ", this.props);
return this.props.items.map((item, i) => (
  <RoomListViewGroupItem key={i} {...item} />
));
 };

这就是真正的问题所在。错误消息基本上是说 this.props.items 不是数组，尽管我从RoomListView

我调试了它并控制台记录了它，但我没有得到这种行为。它跑了几次。* 有时它的值this.props.items是未定义的，有时它不是数组而是数组本身的值。

请查看此屏幕截图，了解每次运行时的道具有何不同（第一次，它有项目，它是一个数组）。但后来它似乎“散布”了，尽管我从未散布它。

为什么会这样？我究竟做错了什么？

标签： javascriptreactjs