当可观察数组更改时,ListItem 不会在 FlatList 中重新呈现
ListItem not rerendering in FlatList when observable array changes
我有一个名为 CheckListItem 的组件,其中包含:
<ListItem
leftAvatar={this.props.leftAvatar}
title={this.props.title}
leftIcon={this.state.icon}
onPress={(event) => {
this.props.onSelect();
}}
containerStyle={{ backgroundColor: this.state.color }}
switch={{ value: this.props.isSelected, disabled: true }} // <-- this switch
/>
我导出为观察者:
export default (observer(CheckListItem));
并从我所谓的 CountryPage 使用它:
render() {
console.log(toJS(this.props.store.countries)); // <-- prints the expected updated list
return (
<View style={{ flex: 1 }}>
<Text>{this.state.ouputText}</Text>
<FlatList
data={this.props.store.countries}
renderItem={({ item }) =>
<CheckListItem
title={item.name}
leftAvatar={{ source: { uri: item.flag } }}
onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
isSelected={item.isSelected} //<-- won't update
/>
}
/>
</View>
);
}
我注入我的商店,它是 SearchParameters 的单例实例
export default inject('store')(observer(CountryPage));
每当我获取我的 SearchParameters 实例并更改驻留在列表 (isSelected
) 中的任何属性时。 CountryPage 重新呈现并记录预期的更新列表。我的问题是这不会更新 CheckListItem - 并重新呈现它。每当列表元素发生变化并重新呈现时,如何让我的 CheckListItem 组件接收更新的道具?
我发现我的答案是这里的第二个答案:。在 CheckListItem 周围添加 Observer 使得 'isSelected' 得以向下传递,从而更新开关。
render() {
console.log(toJS(this.props.store.countries));
return (
<View style={{ flex: 1 }}>
<Text>{this.state.ouputText}</Text>
<FlatList
data={this.props.store.countries}
renderItem={({ item }) =>
<Observer>
{() =>
<CheckListItem
title={item.name}
leftAvatar={{ source: { uri: item.flag } }}
onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
isSelected={item.isSelected}
/>
}
</Observer>
}
/>
</View>
);
}
我有一个名为 CheckListItem 的组件,其中包含:
<ListItem
leftAvatar={this.props.leftAvatar}
title={this.props.title}
leftIcon={this.state.icon}
onPress={(event) => {
this.props.onSelect();
}}
containerStyle={{ backgroundColor: this.state.color }}
switch={{ value: this.props.isSelected, disabled: true }} // <-- this switch
/>
我导出为观察者:
export default (observer(CheckListItem));
并从我所谓的 CountryPage 使用它:
render() {
console.log(toJS(this.props.store.countries)); // <-- prints the expected updated list
return (
<View style={{ flex: 1 }}>
<Text>{this.state.ouputText}</Text>
<FlatList
data={this.props.store.countries}
renderItem={({ item }) =>
<CheckListItem
title={item.name}
leftAvatar={{ source: { uri: item.flag } }}
onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
isSelected={item.isSelected} //<-- won't update
/>
}
/>
</View>
);
}
我注入我的商店,它是 SearchParameters 的单例实例
export default inject('store')(observer(CountryPage));
每当我获取我的 SearchParameters 实例并更改驻留在列表 (isSelected
) 中的任何属性时。 CountryPage 重新呈现并记录预期的更新列表。我的问题是这不会更新 CheckListItem - 并重新呈现它。每当列表元素发生变化并重新呈现时,如何让我的 CheckListItem 组件接收更新的道具?
我发现我的答案是这里的第二个答案:
render() {
console.log(toJS(this.props.store.countries));
return (
<View style={{ flex: 1 }}>
<Text>{this.state.ouputText}</Text>
<FlatList
data={this.props.store.countries}
renderItem={({ item }) =>
<Observer>
{() =>
<CheckListItem
title={item.name}
leftAvatar={{ source: { uri: item.flag } }}
onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
isSelected={item.isSelected}
/>
}
</Observer>
}
/>
</View>
);
}