Дерево состояний MobX - массив моделей не запускает обновление - PullRequest
Новая
       31

Дерево состояний MobX - массив моделей не запускает обновление

0 голосов
/ 25 октября 2018

У меня есть следующая модель: 

 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 не срабатывает.После изменения маршрутов (рендеринга по маршрутизатору) представление обновляется

Есть идеи?Я застрял на несколько часов.

1 Ответ

0 голосов
/ 25 октября 2018
  1. Вам не нужно создавать представление для доступа к вашим необработанным данным, вы можете напрямую использовать реквизит: 
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)
...