Mobx 对子数组的反应 change/remove

Question

如何对数组中的数组变化做出反应？

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 组件没有更新。

Answer 1

第一反应没有按预期工作，因为您访问了 observable 属性，它是对 observable 数组的引用。您的代码修改了数组，但没有修改引用本身。

这一行

todos[0].subtasks = 'changed'

将引起第一反应。

如果你想对子任务做出反应addition/removal你需要改变你对这样的事情的反应

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

第二个反应不起作用，因为您更改了子任务的标题，但反应访问了任务的标题。

我强烈建议您阅读 MobX 文档，因为它们在描述 MobX 的反应时提供了非常详细的信息。而且，还有an example解释了为什么第一反应不行。

Mobx 对子数组的反应 change/remove

Mobx reaction on sub array change/remove

arrays

reactjs

mobx

mobx-react