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

Question

所以我在我的应用程序中使用普通 React UI 组件库和 MobX 作为状态管理。当我有一个可观察的数组作为数据时，我想将它从我的组件（mobx-react observer）传递到 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 输入的变化做出反应？

Answer 1

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

Answer 2

因为mobx数组其实就是一个对象

文档指出，无论何时发生像您这样的情况，数据都应传递为；

data.slice()

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

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

Passing MobX @observable of array to React Component props of PropTypes.array

reactjs

mobx

mobx-react