Wie aktualisiere ich Werte, so dass Mobx ein Rendern verursacht?

Question

Im folgenden Basisbeispiel, das (a) einen Typ (Klasse), (b) einen Speicher (Klasse) und (c) eine Komponente (Klasse) enthält, ist es nicht klar, wie die Instanz des Speichers zu aktualisieren ist ("MyPanel.MyItems"), so dass Mobx die Wertänderung beobachtet und MyList effizient rendert.

Ich bin Beispiele folgen und soweit ich weiß $r.MyItems.Items[4].OnlineStatus = 0/1 sollte eine Neuzeichnung erzwingen. Und das tut es nicht.

class MyItem { 
    id = 0; 
    onlineStatus = 0; 
    displayName = ""; 
    thumbnail = "";  
} 


class MyStore { 
    constructor() { 
     this.items = [ 
     {id:10, onlineStatus:0, displayName:'Bart', thumbnail: '' }, 
     {id:20, onlineStatus:0, displayName:'Jean', thumbnail: '' }, 
     {id:30, onlineStatus:1, displayName:'Emma', thumbnail: '' }, 
     {id:40, onlineStatus:1, displayName:'Caitie', thumbnail: '' }, 
     {id:50, onlineStatus:1, displayName:'Chris', thumbnail: '' }, 
     ]; 
    } 
} 



@observer 
class MyPanel extends React.Component{ 
    @observable 
    MyItems = new MyStore(); 
    Mylist = this.MyItems.items.map(MyItem => (
     <li key={MyItem.id} onClick={this.toggleSelection.bind(this, MyItem.id)} > 
     <span>{MyItem.thumbnail}</span>{ MyItem.onlineStatus ? <i ></i> : <i ></i>} <p>{MyItem.displayName}</p> 
     </li> 
    )); 

    render() { 
     return (

      <div id="my-panel" > 
      <ul className="panel-list"> 
       {this.Mylist} 
      </ul> 
      </div> 

     ); 
    } 
} 

Answer 1

Sie müssen sicherstellen, dass Ihre Daten richtig zu beobachten ist, von Ihrem individuellen MyItem zum items in MyStore.

Beispiel (JS Bin)

class MyItem { 
    @observable id = 0; 
    @observable onlineStatus = 0; 
    @observable displayName = ""; 
    @observable thumbnail = ""; 
    constructor(id, onlineStatus, displayName, thumbnail) { 
    this.id = id; 
    this.onlineStatus = onlineStatus; 
    this.displayName = displayName; 
    this.thumbnail = thumbnail; 
    } 
} 


class MyStore { 
    @observable items = []; 
    constructor() { 
    this.items.push(
     new MyItem(10, 0, 'Bart', ''), 
     new MyItem(20, 0, 'Jean', ''), 
     new MyItem(30, 1, 'Emma', ''), 
     new MyItem(40, 1, 'Caitie', ''), 
     new MyItem(50, 1, 'Chris', '') 
    ); 
    } 
} 

const myStore = new MyStore(); 

@observer 
class MyPanel extends React.Component { 
    toggleSelection(item) { 
    item.onlineStatus = item.onlineStatus === 0 ? 1 : 0; 
    } 
    render() { 
    const myList = myStore.items.map(item => (
     <li key={item.id} onClick={this.toggleSelection.bind(this, item)}> 
     <span>{item.thumbnail}</span> 
     { item.onlineStatus ? <i>online</i> : <i >offline</i>} 
     <p>{item.displayName}</p> 
     </li> 
    )); 
    return (
     <div id="my-panel" > 
     <ul className="panel-list"> 
      {myList} 
     </ul> 
     </div> 
    ); 
    } 
}