実際に配列に項目が挿入される前にMobX計算が実行される

Question

私はReactをMobXと組み合わせて使用​​しています。私は観測可能な配列（会話）を持つストアを使用し、この配列のソートされたバージョンを計算されたプロパティとして提供したいと考えています。新しい会話を追加する場合、会話が配列に追加される前に、計算されたプロパティsortedConversationsが評価されます。以下の小さな例では、「会話の並べ替え」は常に「追加された会話」の前に記録されます。私は何か間違っているのですか？

class Store { 

    ... 

    @observable conversations = []; 

    addConversation(conversation) { 
     this.conversations.push(conversation); 
     console.log('Added conversation'); 
    } 

    @computed 
    get sortedConversations() { 
     console.log('Reordering conversations'); 
     return _.orderBy(this.conversations.slice(), ['lastUpdated'], ['asc']); 
    } 
} 

Answer 1

あなたは間違ったことはしていません。 MobX APIは通常のJavaScriptのように見えますが、監視対象が更新されるたびに、その監視対象はすべて監視対象内で同期的に更新されます。これは、このケースで問題になりませんが、transactionにaddConversationの内容をラップすることができます：

addConversation(conversation) { 
    transaction(() => { 
    this.conversations.push(conversation); 
    console.log('Added conversation'); 
    }); 
} 

ます。また、もtransactionあるactionにaddConversationを作ることができる：

@action 
addConversation(conversation) { 
    this.conversations.push(conversation); 
    console.log('Added conversation'); 
}