mobx可观察数组已更改，但渲染功能未重新运行

Question

@observer
export class BookshelfComponent extends React.Component<{}, {}> {
  @observable
  libraryData: ILibraryBook[] = [{isSelected: false}, {isSelected: false}];

  bookItemPress(index: number) {
    this.libraryData[index].isSelected = !this.libraryData[index].isSelected;
  }

  render() {
    return (

        <FlatList
          data={this.libraryData.slice()}
          renderItem={this.renderItem}
          numColumns={3}/>

    );
  }

  renderItem = ({item, index}) => {
    return (
      <LibraryItemComponent
        bookLibraryItem={item}
        itemClick={() => {
          this.bookItemPress(index)
        }}
      />
    );
  }

}

当我按下清单列表项以调用bookItemPress功能时，render功能不会再次运行；

但是当我将一个项目推送到libraryData时，效果很好！

谢谢！

Answer 1

要更新@observable，您也可以

1. 在功能上使用动作装饰器。

  @action.bound
  bookItemPress(index: number) {
    this.libraryData[index].isSelected = !this.libraryData[index].isSelected;
  }

2. 使用runInAction

  bookItemPress(index: number) {
    runInAction(() => {
       this.libraryData[index].isSelected = !this.libraryData[index].isSelected;
    })
  }

Answer 2

传递给renderItem的渲染回调FlatList不是从装饰有BookshelfComponent的组件@observer中调用，而是从不是观察者的FlatList中调用。

您可以使用Observer component来解决此问题。

Observer

Answer 3

renderItem = ({item, index}) => {
  return (
    <Observer>{() => (
      <LibraryItemComponent
        bookLibraryItem={item}
        itemClick={() => {
          this.bookItemPress(index)
        }}
      />
    )}</Observer>
  );
}

}

@observer
export class LibraryItemComponent extends React.Component<ILibraryItemProps> {
   ...
}


@observer
export class BookshelfComponent extends React.Component<{}, {}> {
@observable
libraryData: ILibraryBook[] = [{isSelected: false}, {isSelected: false}];

bookItemPress(index: number) {
  this.libraryData[index].isSelected = !this.libraryData[index].isSelected;
}

render() {
  return (

    <FlatList
      data={this.libraryData.slice()}
      renderItem={this.renderItem}
      numColumns={3}/>

  );
}

renderItem = ({item, index}) => {
  return (
    <LibraryItemComponent
      bookLibraryItem={item}
      itemClick={() => {
        this.bookItemPress(index)
      }}
    />
  );
}

组件装饰有观察者可以很好地工作。