サブアレイの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を使用しています。子供の配列を変更すると、私のReactコンポーネントは更新されません。

Answer 1

観測可能な配列への参照であるobservableプロパティにアクセスするため、最初の反応が期待通りに機能しません。コードでは配列は変更されますが、参照自体は変更されません。

このライン

todos[0].subtasks = 'changed' 

は、最初の反応を呼び出します。

あなたが追加/削除をサブタスクに反応する場合は、あなたがサブタスクのタイトルを変更するため、2番目の反応は動作しませんが、反応がのタイトルをアクセスし、この

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

ような何かにあなたの反応を変更する必要がありますタスク。

MobXドキュメントは、MobXがどのようなものに反応するかを説明する際に非常に詳細に読まれることを強くお勧めします。さらに、最初の反応がうまくいかない理由を説明するan exampleがあります。