[英]How to update rendered flat/section list items immediately React Native
我正在創建一個ContactListScreen
。 ContactListScreen
的直接子元素是ContactItems
, ContactItems
是一個 sectionList ,它呈現每個ContactItem
。 但問題出現了,因為我的ContactItems
應該是多選的。
我將selectedContacts
數組從我的狀態傳遞給每個ContactItem
。 我這里使用的邏輯是ContactItem
檢查selectedContacts
的長度是否為 0。 如果長度為零,它不應該呈現任何selectItemView
,如果我選擇一個項目,它應該使用回調將自己推送到selectedContacts
。 但問題是子組件( ContactItem
)在我選擇取消選擇項目兩次或三次之前不會更新。 我怎樣才能讓它工作?
ContactList.tsx 的一部分
class ContactList extends Component {
this.state = {
loading: false,
error: null,
data: [],
selectedItems: []
};
handleSelectionPress = (item) => {
this.setState(prevState => {
const { selectedItems } = prevState;
const isSelected = selectedItems.includes(item);
return {
selectedItems: isSelected
? selectedItems.filter(title => title !== item)
: [item, ...selectedItems],
};
});
};
renderItem(item: any) {
return <ContactItem item={item.item}
isSelected={this.state.selectedItems.includes(item.item)}
onPress={this.handleSelectionPress}
selectedItems={this.state.selectedItems}
/>;
}
render() {
return (
<View style={styles.container}>
<SectionList
sections={this.state.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem.bind(this)}
renderSectionHeader={({section}) => (
section.data.length > 0 ?
<Text>
{section.title}
</Text> : (null)
)}
/>
</View>
);
}
}
ContactItem.tsx 的一部分
class ContactItem extend Component {
render() {
const checkBox = <TouchableOpacity onPress={() => {
this.props.onPress(this.props.item)
}
} style={this.props.selectedItems.length > 0 && {display: 'none'}}>
{!this.props.isSelected ?
<View style={{borderRadius: 10, height: 20, width: 20, borderColor: "#f0f", borderWidth: 1}}>
</View> : <View style={{
borderRadius: 10,
height: 20,
width: 20,
borderColor: "#f0f",
borderWidth: 1,
backgroundColor: "#f0f"
}}>
</View>}
</TouchableOpacity>
return (
<View style={this.styles.contactsContainer}>
<TouchableOpacity
onLongPress={() => this.props.onPress(this.props.item)}>
<View style={this.styles.contactInfo}>
{checkBox}
</View>
</TouchableOpacity>
</View>
);
}
注意:我工作的地方不使用功能組件。
我不是 100% 確定這一點,但我有一種感覺,問題是SectionList
組件沒有觸發它的更新,因為提供的sections={this.state.data}
屬性永遠不會改變。
處理此問題的最簡單方法是將selectedItems
作為extraData屬性添加到部分列表:
<SectionList
sections={this.state.data}
extraData={this.state.selectedItems}
//...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.