@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时,效果很好!
谢谢!
要更新@observable
,您也可以
@action.bound
bookItemPress(index: number) {
this.libraryData[index].isSelected = !this.libraryData[index].isSelected;
}
runInAction
bookItemPress(index: number) {
runInAction(() => {
this.libraryData[index].isSelected = !this.libraryData[index].isSelected;
})
}