3

我有以下模型：

 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不触发。更改路由后（由路由器重新渲染）视图得到更新

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

4

1 回答 1

4
  1. 你不需要创建视图来访问你的原始数据，你可以直接使用道具：
inject(states => ({
  data: states.myModel.data
}))
  1. 如果您observer使用inject. MyComponent 将很好地观察注入内的内容：
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)
于 2018-10-25T16:38:48.473 回答