子陣列更改/刪除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這解釋了爲什麼第一個反應不起作用。