Question

所以我在我的应用程序中使用vanilla 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库的所有者，因此我无法添加PropTypes验证，这些验证在该问题中提到的mobx-react包中作为答案。 UI库是否会以toJS作为其支柱的输入做出反应？

Answer 1

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

Answer 2

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

文档声明，每当发生类似您的情况时，数据应该作为;

传递

data.slice()

为了将其变成普通数组。由于所讨论的图书馆很可能也缺乏观察者装饰者，我认为即使你以其反应性质传递观察者，它也不会起作用。因此，您应该将其作为非反应性数据处理，或者对库进行分叉以满足此需求。

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

2 个答案: