为什么我在数组中传递的道具会分散到它包含的对象中?

背景:

• 呈现组(带有标题的文件夹)的原始视图。
• 每个图像子级渲染图像和一些文本+标记

RoomListView 将状态传递给 RoomListViewGroup . RoomListViewGroupItem 查看每个项目(带有标题的图片等)。

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

我所在的州 如下所示(示例数据-硬编码-无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"
      }
    ]
  }
]
};

我把道具从 这样地:

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。物品不是数组,尽管我从中传入 RoomListView

我调试了它,控制台记录了它,我没有这种行为。 *有时它的价值 this.props.items

请看这个屏幕截图,看看每次跑步时道具的不同之处(第一次,道具中有道具,它是一个数组)。虽然我从来没有传播过,但它似乎是“传播”出来的。

为什么会这样?我做错了什么?