组件多次使用的共享内部状态

Question

这是我遇到的一个问题，几天后就被炸掉了，也许这可以帮助遇到类似问题的其他人：

我正在为我的应用程序使用office-fabric-ui-react。 而且我正在使用Pivot / PivotItem在不同的位置显示不同的列表，具体取决于类型，添加成员或管理器等。

这些列表的数据源自同一数组，并且这些列表只是按项目类型划分的过滤器。

现在这些列表使用自己编程的组件，并且它们似乎彼此共享自己的内部状态。

我通过道具放下了过滤器，并将其保存为如下状态：

constructor(props: any) {
    super(props);
    this.state = {
      selection: new Selection(),
      showModal: false,
      filter: this.props.filter
    };
  }

在每个自己的数据透视图中，都有我单击的第一个数据透视的过滤器。

原因：我是个白痴，我给每个PivotItem都设置了相同的{key}属性，因此它以某种方式认为这只是一个实例。

我在{key}中填充了过滤器后，一切都按预期运行。