将数组的 MobX @observable 传递给 PropTypes.array 的 React 组件道具答案

【问题标题】：Passing MobX @observable of array to React Component props of PropTypes.array将数组的 MobX @observable 传递给 PropTypes.array 的 React 组件道具
【发布时间】：2017-05-22 17:06:27
【问题描述】：

所以我在我的应用程序中使用了一个普通的 React UI 组件库和 MobX 作为状态管理。当我有一个可观察的数组作为数据并且我想将它从我的组件（这是一个mobx-reactobserver）传递到 UI 库的组件（它的 prop 是 PropTypes.array 的类型）时，组件拒绝它说我的可观察数组是一个对象，而不是一个数组。

// my store
class Store {
  @observable data = [...];
}


// my component
@inject('store')
@observer
class MyComponent extends React.Component {
  ...
  render() {
    const {store} = this.props;
    return <LibComponent data={store.data} />
  }
}

// library's component
class LibComponent extends React.Component {
  static propTypes = {
    data: PropTypes.array,
    ....
  }
}

我在类似的question 中读过关于使用来自 mobx 的 toJS 的信息，但是还有其他方法可以解决这个问题吗？由于我不是 UI 库的所有者，因此我无法添加该问题中提到的 mobx-react 包中的 PropTypes 验证作为答案。 UI 库是否会以 toJS 作为其 prop 的输入来响应更改？

【问题讨论】：

我想别无他法。

标签： reactjs mobx mobx-react

【解决方案1】：

mobx-react 自带 propTypes，你可以使用它：https://github.com/mobxjs/mobx-react#proptypes

【讨论】：

谢谢@mweststrate，我知道mobx-react 有自己的propTypes，但它是用于组件库的。同时，我正在尝试使用这样的库，它不使用 mobx-react propTypes 来验证其道具，而是使用数组类型的标准 prop-types。有什么解决办法吗？
库组件可能不应该首先接收可观察对象（除非它们本身是观察者）。只需在最近的环绕观察者组件中转换为纯数据

【解决方案2】：

这是因为 mobx 数组实际上是一个对象。

文档指出，每当发生像您这样的情况时，数据都应该传递为；

data.slice()

为了把它变成一个普通的数组。由于所讨论的库很可能也缺少观察者装饰器，因此我认为即使您将可观察者的反应特性传递给它，它也不会起作用。因此，您应该将其作为非反应性数据处理，或者分叉库以满足此需求。

【讨论】：