如何更新值以便 Mobx 进行渲染？

Question

在下面的基本示例中，它包括 (a) 类型 (class)、(b) 商店 (class) 和 (c) 组件 (class), 我不清楚如何更新商店的实例 ("MyPanel.MyItems") 以便 Mobx 观察值的变化，并有效地重新呈现 MyList。

我正在按照示例进行操作，据我所知，$r.MyItems.Items[4].OnlineStatus = 0/1 应该强制重绘。但事实并非如此。

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

您需要确保您的数据是正确可见的，从您的个人 MyItem 到 MyStore 中的 items。

示例 (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>
    );
  }
}

如何更新值以便 Mobx 进行渲染？

How do I update values so that Mobx causes a render?

javascript

reactjs

mobx