javascript - 如何立即更新渲染的平面/部分列表项 React Native
问题描述
我正在创建一个ContactListScreen
. ContactListScreen
isContactItems
和is的直接子级ContactItems
是一个 sectionList ,它呈现 each 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}
//...
推荐阅读
- oracle - 需要在plsql代码oracle apex的字符串内连接“”
- angular - Ionic 4 firestoe如何在数据中保存id?
- algorithm - K个散列函数的值,使得误报概率最多为1/n
- node.js - 如何使用 React Node 和 MongoDB 上传和显示 svg 图片?
- tensorflow - 安装 TensorFlow 插件
- javascript - sort() JS 函数没有给出预期的结果
- jquery - 我有一个关于 DOM 选择器的问题,我应该在作业中使用它
- json - 从 JSON 文件读取时 Python 抛出错误
- amazon-ec2 - AWS:如何创建指向私有 IP 的 DNS?
- c - macOS 上的 Libsodium,x86_64 的未定义符号