MobXが配列

Question

マイStore.jsにプッシュするときのビューに反応更新していない：

import { observable, useStrict, action } from 'mobx'; 

useStrict(true); 

export const state = observable({ 

    contacts: [] 

}); 

export const actions = { 

    addContact: action((firstName, lastName) => { 
     state.contacts.push({ 
      id: Math.floor((Math.random() * 1000) + 1), 
      firstName: firstName, 
      lastName: lastName 
     }); 
    }) 

}; 

マイindex.js：

import React from 'react'; 
import { Provider } from 'mobx-react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import { state, actions } from './Store'; 

ReactDOM.render(
    <Provider state={state} actions={actions}> 
     <App /> 
    </Provider>, 
    document.getElementById('root') 
); 
registerServiceWorker(); 

マイApp.js：

import React, { Component } from 'react'; 
import ContactList from './components/ContactList'; 
import ContactAdder from './components/ContactAdder'; 
import { observer, inject } from 'mobx-react'; 

const App = inject('state', 'actions')(observer(class App extends Component { 
    render() { 
    return (
     <div> 

     <h1>Contacts</h1> 

     <ContactList 
      contacts={this.props.state.contacts} 
      onDelete={this.props.actions.removeContact} 
     /> 

     <ContactAdder onAdd={this.props.actions.addContact} /> 

     </div> 
    ); 
    } 
})); 

export default App; 

そして、ようやく私のContactAdder.js：

import React, { Component } from 'react'; 

class ContactAdder extends Component { 

    render() { 
     return (
      <div className='ContactAdder'> 
       <input type='text' value='' placeholder='First Name' /> 
       <input type='text' value='' placeholder='Last Name' /> 
       <button onClick={this.props.onAdd.bind(this, 'Test', 'Testerson')}>Add</button> 
      </div> 
     ); 
    } 

} 

export default ContactAdder; 

addContact()がStore.jsで実行された後、私はコンソールログを見るとアレイに突然変異が起こることがわかります。しかし何らかの理由で私の見解は反応していません。私は間違って何をしていますか？

Answer 1

ContactListコンポーネントが表示されていない場合は、それをobserverにするだけで問題は解決すると思います。

以前のレンダーで参照解除されたオブザーバブルが変更されると、オブザーバコンポーネントが再レンダリングされます。 this.props.state.contactsは連絡先配列の参照を解除しません。あなたがthis.props.state.contacts.slice()またはthis.props.state.contacts.peek()と書いたのであれば動作しますが、一般的にはpassing observables to external librariesの場合にのみ使用されます。

observablesを使用するすべてのコンポーネントをobserversにできるだけ効率的にすることもできます。