Реакция Mobx на изменение / удаление подмассива

Как реагировать на изменение массива массива?

var todos = mobx.observable([
    {
        title: "Make Pasta", 
        subtasks: [  
            { title: 'Pasta' }, { title: 'Salt' },
        ] 
    },
    { 
        title: "Make coffee", 
        subtasks: [ 
            { title: 'Hot Water' }, { title: 'Milk' },
        ] 
    }
]);

const reactionSubtask = mobx.reaction(
    () => todos.map(todo => todo.subtasks),
    subtasks => console.log("reaction subtasks >", subtasks)
);

const reactionTask = mobx.reaction(
    () => todos.map(todo => todo.title),
    titles => console.log("reaction title >", titles.join(', '))
);

const resultSubtaskRemove = todos[1].subtasks.remove(todos[1].subtasks[0]);
console.log('Subtask remove result >', resultSubtaskRemove);

const resultSubTaskAdd = todos[1].subtasks.push({title: 'Filter'});
console.log('Subtask add result >', resultSubTaskAdd);

const resultSubTaskChange = todos[1].subtasks[0].title = 'Change titled';
console.log('Subtask change result >', resultSubTaskChange);
<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>

Реакция не выполняется.

В моем случае я использую mobx-react, и мои компоненты React не обновляются, когда я меняю дочерний массив.


reactjs arrays mobx mobx-react
person ridermansb    schedule 07.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Первая реакция не работает должным образом, потому что вы получаете доступ к наблюдаемому свойству, которое является ссылкой на наблюдаемый массив. Код изменяет массив, но не саму ссылку.

Эта линия

todos[0].subtasks = 'changed'

вызовет первую реакцию.

Если вы хотите отреагировать на добавление / удаление подзадач, вам нужно изменить свою реакцию на что-то вроде этого

const reactionSubtask = mobx.reaction(
    () => todos.map(todo => todo.subtasks.slice()),
    subtasks => console.log("reaction subtasks >", subtasks)
);

Вторая реакция не работает, потому что вы меняете заголовок подзадачи, но реакция обращается к заголовку задач.

Я настоятельно рекомендую вам прочитать документацию MobX, поскольку они подробно описывают, на что реагирует MobX. Кроме того, существует пример, объясняющий, почему первая реакция не работает.

person Alik    schedule 10.06.2017