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

父级（查看/页面）：

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

孩子一：

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

我有一个重新渲染的问题。最初子组件不渲染任何东西。同时获取数据（动作触发自身）。但是数据不会在孩子中更新。 componentWillReact 不会触发。 更改路由后（由路由器重新渲染）视图得到更新

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

Answer 1

1. 您不需要创建视图来访问原始数据，您可以直接使用该道具：

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

1. 如果使用inject，则不需要使用observer。 MyComponent 会很好地观察注入的内容：

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

1. 在这种情况下，您正在观察作为参考的数组。如果您更新数组的项目，则数组本身不会更改，因此不会重新渲染 MyComponent。您可以观察数组长度，这样如果长度发生变化，MyComponent 会重新渲染，但它仅在您从数组中添加或删除项目时才有用：

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

4. 最后，如果想观察数组项的变化，即使长度不变，你需要在内部观察这些项：

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)