javascript - MobX 状态树 - 模型数组不会触发更新

Question

我有以下模型:

 const AnotherModel = types.model({
    foo: types.string
 });

 export const SomeCollectionModel = types
     .model({
         data: types.array(AnotherModel),
     })
     .views((self) => ({
         getData: () => self.data,
     }))
     .actions((self) => ({
         fetchData: flow(function* fetchData() {
             try {
                 const data =
                     yield service.fetchData();
                 self.data.replace(
                     data.map((f) => AnotherModel.create(f)),
                     // Using plain json instead of create does the same
                 );
             } catch (err) {
                 console.error(err);
             }
         })
    }));

然后我有两个 React 组件，它们由 inject 和 observer 组成。

父级( View /页面):

compose(
    inject((states) => ({
        fetchData: () =>
            states.myModel.fetchData(),
    })),
    observer,
)

child 一:

compose(
    inject(states => ({
        data: states.myModel.getData()
    })),
    observer
)

我有一个重新渲染的问题。最初子组件不渲染任何东西。同时获取数据(操作本身触发)。但是数据不会在 child 中更新。 componentWillReact 不触发。更改路由后(通过路由器重新渲染) View 得到更新

你有什么想法吗？我被困了几个小时。

Answer 1

1. 您不需要创建 View 来访问您的原始数据，您可以直接使用 prop:

inject(states => ({
  data: states.myModel.data
}))

1. 如果使用inject，则不需要使用observer。 MyComponent 将很好地观察注入(inject)内部的内容:

inject(states => ({
  data: states.myModel.data
}))(MyComponent)

1. 在本例中，您观察的是数组，它是一个引用。如果更新数组的项目，数组本身不会更改，因此不会重新呈现 MyComponent。您可以观察数组长度，这样，如果长度发生变化，MyComponent 将重新呈现，但它仅在您从数组中添加或删除项目时才有用:

inject(states => ({
  data: states.myModel.data,
  length: states.myModel.data.length
}))(MyComponent)

1. 最后，如果想要观察数组项的变化，即使长度没有改变，你需要在内部观察项:

inject(states => ({
  data: states.myModel.data,
  length: states.myModel.data.length
}))(MyComponent)

const MyComponent = ({ data }) => (
  <div>{data.map(item => (
    <MyDataItem item={item} />
  ))}
  </div>
)

inject((states, props) => ({
  foo: props.item.foo
}))(MyDataItem)