我用的是reactjs和mobx。我有一个可观察的Item对象数组，我试图通过观察数组中对象的属性来显示它们并显示属性更改。这些更改不是由任何组件上的单击事件触发的，而是由对API调用的响应触发的。
我知道数组中对象的属性更改不会触发整个列表重新呈现（这很好），但我无法让它重新呈现应该观察Item对象属性的单个Item组件。
我尝试了几种方法来让数组中的Item对象变得可观察，但这些方法都不适合我：

• 从Item的构造函数调用'extendObservable（）
• 将props.item赋值给一个用“@observable”修饰的类成员
• 调用observable构造函数，并像这样传入item对象：const item = observable（item）
• 将'hasUnreadData'字段作为单独的prop传递，并通过'observable.box（item.hasUnreadData）使其可观察。

下面是一些简化的示例代码（以类型脚本形式）：

class Item {

  id : string
  hasUnreadData : boolean

  constructor (data: any) {
    this.id = data.id;
    // false by default
    this.hasUnreadData = data.hasUnreadData;
  }

}

@observable items: Item[];

// observes the array and re-renders when items are added/removed (this works)
@observer
class ItemListComponent extends React.Component {
  render() {
    return (
      <List> {
        items.map((item: Item, index) => {

          <ItemComponent key={item.id} itemModel={item} />

        }
      }
    )
  }
}

// should observe the 'hasUnreadData' flag and apply different styles when it re-renders (but this does not work, it only displays the initial state)
@observer
class ItemComponent extends React.Component {
  render() {
    const item = this.props.item;
    return (
      <ListItem button divider selected={item.hasUnreadData} />
    )

  }
}

// imagine this is a promise from an API call
API.fetchData().then((itemId: string) => {
  itemToUpdate = items.find(i => i.id === itemId);
  itemToUpdate.hasUnreadData = true; 
  // this does not trigger the ItemComponent to render again as expected.
});

我是否需要克隆或以其他方式“重新创建”Item对象来触发渲染？还是我犯了个明显的错误谢谢你的帮助。