MobX不更新陣營視圖推到一個數組

我Store.js時：MobX不更新陣營視圖推到一個數組

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後運行我可以看到，當我做控制檯日誌時，數組確實發生了變異。但由於某種原因，我的觀點並沒有反應。我究竟做錯了什麼？

來源

2017-08-23 Tiwaz89

我沒有看到任何地方你實際上正在更新呈現組件的狀態。 – Cruiser

@Cruiser我的印象是MobX爲你做的。如果您的「可觀察」值發生變化，則任何屬於「觀察者」的類都將重新渲染。還是我完全錯了？ – Tiwaz89

我認爲MobX文檔可能有所幫助：https://mobx.js.org/best/react.html我認爲你正在改變跟蹤功能之外的值，這是行不通的。看看這個標題的頁面部分：不正確：改變一個不可觀察的參考 – Cruiser

沒有看到您的ContactList組件，我認爲如果您只是將其作爲observer也會解決問題。

觀察者組件將在先前呈現中取消引用的觀察值發生更改後重新呈現。 this.props.state.contacts不會取消引用您的聯繫人數組。如果你寫了this.props.state.contacts.slice()或this.props.state.contacts.peek()，它會起作用，但通常只在passing observables to external libraries時使用。

您可能還想讓使用observables的所有組件儘可能高效地使用observers。

來源

2017-08-24 09:28:35 Tholle

MobX不更新陣營視圖推到一個數組

回答

相關問題