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组成。

父母一（视图/页面）：

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

一个孩子：

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

我有一个重新调整的问题。最初，子组件不呈现任何内容。同时，将获取数据（动作触发自身）。但是，数据不会在子级中更新。 componentWillReact不会触发。更改路由（通过路由器渲染）后，视图会更新

你有什么主意吗？我被困了几个小时。

Answer 1

您无需创建视图即可访问原始数据，可以直接使用prop：

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

如果使用observer，则无需使用inject。 MyComponent会很好地观察注入中的内容：

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

在这种情况下，您正在观察数组，它是一个参考。如果更新数组的项目，则数组本身不会更改，因此不会重新呈现MyComponent。您可以通过这种方式观察数组的长度，如果长度发生变化，则可以重新渲染MyComponent，但这仅在您从数组中添加或删除项目时有用：

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

最后，如果即使长度不变也要观察数组项目的变化，则需要在内部观察项目：

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)

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

1 个答案: