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属性，它是对可观察数组的引用。您的代码修改了数组，但不修改引用本身。

这一行

todos[0].subtasks = 'changed'

将引发第一反应。

如果您想对子任务添加/删除做出反应，您需要将您的反应更改为类似

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

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

我强烈建议您阅读MobX文档，因为它们在描述MobX的反应时会详细介绍。此外，有an example解释了为什么第一反应无效。

Mobx对子阵列的反应改变/移除

1 个答案: