可观察阵列道具变化

Question

我如何观察一系列接口。所以我宣布了一个interfaace：

export interface IBox {
    Id: number;
    Name: string;
    Show: boolean;
}

在我的componentWillMount()：

public componentWillMount() {
    this.data = observable(this.props.boxes as IBox[]);
}

如果更改了Show的值，我怎么能唤起渲染？

Answer 1

默认情况下，当对象变为observable时，mobx会观察对象中的所有属性：https://mobx.js.org/refguide/object.html

所以当你这样做时：

this.data.push({
  Id: 0,
  Name: '',
  Show:false
});
this.data[0].Show = true; // show is now observed.

什么不起作用？

var obj = {
  Id: 0,
  Name: '',
  Show:false
};
this.data.push(obj);
obj.Show = true; // show is not observed!.

这也行不通，请参阅：https://mobx.js.org/best/pitfalls.html

this.data.push({});
this.data[0].Show = true; // since property didn't exist when added, it is not observed.

数组应触发内部模型的更改，从而更新/重新渲染正确的组件。

确保使用该数据的组件具有@observer。 （否则它不会触发重新渲染）。另一个解决方案是在观察到的组件中mobx.toJS(this.data)，并将此结果作为非观察组件的道具。