Mobx 可观察属性答案

【问题标题】：Mobx observable propertiesMobx 可观察属性
【发布时间】：2018-10-16 12:45:03
【问题描述】：

使用此操作将可观察属性添加到数组后

@action
improvePrograms = function() {
    let data = this.dataPro;
    this.dataProImproved = data;
    for (i = 0; i < data.length; i++) {
      extendObservable(this.dataProImproved[i], {
        wishedFor: false,
        inCart: false,
        sold: false
      });
    }
  };

我尝试通过以下方式更改属性的值：

  @action
  addToWishList = function(item) {
    for (i = 0; i < this.dataProImproved.length; i++) {
      if (this.dataProImproved[i].program_id === item.program_id && this.dataProImproved[i].wishedFor === false) {
        this.dataProImproved[i] = { ...this.dataProImproved[i], wishedFor: true };
        console.log("Program added to wish list: ", this.dataProImproved[i]);
        this.getWishList();
      }
    }
  };

一切看起来都很好，但是我使用 observable 属性来更改颜色的组件没有反应或重新渲染，即使属性的值更改为 true。

        <TouchableOpacity onPress={!this.props.program.wishedFor ? this.onSelectWish : this.onDeselectWish}>
          <FontAwesome
            style={{ padding: 7 }}
            name={this.props.program.wishedFor === false ? "heart-o" : "heart"}
            size={28}
            color={!this.props.program.wishedFor ? "#c5d1e8" : "#ff1d25"}
          />
        </TouchableOpacity>

有人可以向我解释我在这里做错了什么。类组件用@observer 修饰并注入store。

【问题讨论】：

所以我让它通过@computed 传递数据数组，例如：

标签： properties observable mobx

【解决方案1】：

所以我让它通过以下方式传递数据数组：

@computed get getDataProImproved(){return this.dataProImproved}

在将数组传递给 FlatList 之前不要忘记对数组进行切片... 一切反应都很好……

【讨论】：