如何监听接口数组中Show属性变化以触发React组件渲染？

嘿，这个问题其实是MobX和React组件联动的常见场景，我来给你一步步说清楚怎么搞定：

1. 给你的React组件加上observer装饰器 #

MobX需要明确知道哪个组件要追踪observable数据的变化，只有被observer包裹的组件，才会在observable的属性（比如你的Show）改变时自动触发重渲染。

比如你的类组件可以这样修改：

import { observer } from 'mobx-react';
import { observable } from 'mobx';

@observer // 关键：加上这个装饰器
class YourBoxComponent extends React.Component<{ boxes: IBox[] }, {}> {
  public data: ObservableArray<IBox>;

  // 另外提一句：componentWillMount已经被React废弃了，建议换成constructor初始化
  constructor(props: { boxes: IBox[] }) {
    super(props);
    this.data = observable(this.props.boxes as IBox[]);
  }

  // 你的其他组件逻辑...
}

2. 确保修改Show属性的操作在MobX的可追踪上下文里 #

虽然MobX在非严格模式下允许直接修改observable属性，但为了代码规范和避免潜在的追踪问题，推荐把修改逻辑放在action里：

import { action } from 'mobx';

// 在组件内部定义修改Show的方法
@action
public toggleBoxVisibility(boxId: number) {
  const targetBox = this.data.find(box => box.Id === boxId);
  if (targetBox) {
    targetBox.Show = !targetBox.Show; // 修改Show属性
  }
}

当你调用这个方法修改Show时，MobX会立刻追踪到变化，然后通知被observer包裹的组件执行render。

补充说明 #

当你用observable()处理数组时，数组里的普通IBox对象会被MobX自动转换为observable对象，所以修改对象的Show属性是会被追踪到的——前提是你的组件已经被observer装饰啦。

内容的提问来源于stack exchange，提问作者Tee F