У меня есть список доступных квартир.Когда пользователь касается строки, он выбирает этот конкретный элемент и сохраняет идентификатор этого элемента в массиве.Но когда я пытаюсь отменить выбор элемента путем повторного прикосновения к выбранному элементу, он не отменяет выбор и снова добавляет его в массив, но если я касаюсь его снова во второй раз, он удаляет элемент из массива, но все равно не отменяет выбор.Ниже приведен мой код для плоского списка:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
FlatList,
List,
ListItem
} from 'react-native';
import {
Container,
Header,
Item,
Input,
Button,
StyleProvider,
Icon,
Body,
Right,
StatusBar,
Card,
CardItem,
CheckBox,
Left
} from 'native-base';
export default class UserList extends Component {
constructor(props) {
super(props);
const {params} = this.props.navigation.state;
this.state = {
data: [],
SelectedUserList: params.selectedUserID.slice(),
SelectedUserListName: [],
renderedListData: [],
IsInArray: true,
selectedUserID: params.selectedUserID,
IsSelected: (new Map(): Map<string, boolean>)
}
console.log("selectedUserID" + JSON.stringify(this.state.selectedUserID))
console.log("selectedCropName" + JSON.stringify(params.SelectedUserListName))
}
press = (hey) => {
console.log('Press:'+this.state.SelectedUserList)
this.state.renderedListData.map((item) => {
if (item.id === hey.id) {
item.check = !item.check
if (item.check === true) {
this.state.SelectedUserList.push(item.id);
this.state.SelectedUserListName.push(item.name);
console.log('selected:' + item.name);
console.log(this.state.SelectedUserListName.includes(item.id))
} else if (item.check === false) {
const i = this.state.SelectedUserList.indexOf(item)
const j = this.state.SelectedUserListName.indexOf(item)
if (1 != -1) {
this.state.SelectedUserList.splice(i, 1)
this.state.SelectedUserListName.splice(j, 1)
console.log('unselect:' + item.name)
return this.state.SelectedUserList
}
}
}
})
this.setState({data: this.state.data})
}
componentDidMount() {
//Fetch Data From API
...
}
render() {
return (
<View style={styles.container}>
<View style={styles.storyContainer}>
<FlatList data={this.state.renderedListData} keyExtractor={item => item.id.toString()}
extraData={this.state}
renderItem={({item}) => {
return <TouchableOpacity style={{
flexDirection: 'row',
padding: 2
}} onPress={() => {
this.press(item)
}}>
<View style={{
flex: 3,
alignItems: 'flex-start',
justifyContent: 'center'
}}>
{<Card
style={{
width: '100%',
height: 80,
alignItems: 'center'
}}>
<CardItem style={{height: '100%'}}>
<Left>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center'
}}>
<CheckBox checked={(this.state.selectedUserID.includes(item.id) || item.check ) ? true : false}
style={{marginRight: 15}}/>
<View>
<Text style={{
color: "#24466B",
fontSize: 16
}}>
{item.name}
</Text>
</View>
</View>
</Left>
</CardItem>
</Card>}
</View>
</TouchableOpacity>
}}/>
</View>
</View>
)
}
};
Он определил SelectedUserList как:
SelectedUserList: params.selectedUserID.slice()
, потому что когда пользователь выбирает список и нажимает ОК, он выталкивает этот массив на предыдущий экран, и если пользователь пытаетсячтобы снова выбрать его, он перемещает массив на экран списка, и ранее выбранный элемент автоматически повторно выбирается на экране списка.
Функция onPress ранее работала нормально, но когда я добавил срез с состояниями, он прекратил отменять выбор.Я добавил срез с состояниями массива, чтобы установить состояние, как оно есть на предыдущем экране