mobx observable array has changed, but render function does not re-run

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)
        }}
      />
    );
  }

}

when i press a flatlist item to call bookItemPress function, the render function does not run again;

but when i push an item to the libraryData ,it works well!

thanks!!

score 0 · Answer 1 · answered Dec 11 '19 at 09:19

0

To update an @observable, you either

Use action decorator on the function.

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

Use runInAction

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

answered Dec 11 '19 at 09:19

Sanyam Jain

1,154
6
9

i hava try this! but it not works. the mobx may be thinks the data have not changed. thanks!! – perry Dec 11 '19 at 09:25

score 0 · Answer 2 · answered Dec 12 '19 at 02:09

@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)
      }}
    />
  );
}

}

It can work well that LibraryItemComponent component decorated with observer.

mobx observable array has changed, but render function does not re-run

2 Answers2