我正在创建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> ); }
注意:在我工作的地方不使用功能组件。
我正在创建一个ContactListScreen。 ContactListScreen的直接子级是ContactItems,而ContactItems是一个呈现每个ContactItem的sectionList。但是问题出现了,因为我的ContactItems ...
我对此不是100%的确定,但是我感到问题在于SectionList
组件不会触发其更新,因为提供的sections={this.state.data}
属性永远不会改变。