子阵列更改/删除Mobx反应

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组件不更新时，我更改儿童数组。

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这解释了为什么第一个反应不起作用。