Показать только отфильтрованные элементы в плоском списке ReactNative - PullRequest
Новая
       10

Показать только отфильтрованные элементы в плоском списке ReactNative

0 голосов
/ 09 марта 2020

Когда пользователь переходит на экран (скажем, на экран A), я получаю данные пользователей из API и показываю их в виде плоского списка. В этом представлении есть панель поиска. Когда пользователь ищет имя (чтобы найти контактный номер), он фильтрует данные из плоского списка. Оно работает. Но у меня есть другое требование. Мне нужно сделать поиск не только из списка, но и в телефонном контакте людей. Допустим, этот человек А ищет имя «Рахул» в строке поиска. Если есть совпадения имен в плоском списке (который показывает данные из API), я хочу показать это, а также мне нужно показать контактную информацию «Rahul», если это имя хранится в телефонном контакте. Итак, я использовал два плоских списка (скажем, FlatList A и FlatList B, данные FlatList A-API | Flat List B - контактные данные телефона). Один для отображения данных API, а другой для отображения контактных данных телефона. Но моя проблема в том, что когда пользователь ищет имя и очищает текст, во всех записях телефонных контактов отображается плоский список. Я только хочу показать элемент телефонного контакта в плоском списке (плоский список B), а не показать весь телефонный контакт. Это то, что я пытался. 

class UsersListScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        data:[],
        phContacts:[],


    };
    this.usersData= [];
    this.phoneContactData =[];

}

componentDidMount(){
   this.props.getUsersData();
   this.getPhoneContacts();
}

componentDidUpdate(previousProps){
    if(previousProps.usersList != this.props.usersList){
        this.setState({data:this.props.usersList})

    }
}

getPhoneContacts(){
    if (Platform.OS === "android") {
        PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
            {
              'title': 'Contacts',
              'message': 'This app would like to access your contacts.'
            }
          ).then(() => {
            Contacts.checkPermission((err, permission) => {
              if (err) throw err;

              if (permission === 'undefined') {
                Contacts.requestPermission((err, permission) => {
                })
              }
              if (permission === 'authorized') {
                Contacts.getAll((err, contacts) => {
                    this.usersData = this.props.usersList
                    this.phoneContactData = contacts
                })
              }
              if (permission === 'denied') {
                console.log('denied')
              }
            })
          })
    }
}

//Search Filter
searchFilter =text=>{

    const filteredData = this.usersData.filter(item => {  
        const itemData = `${item.userName.toUpperCase()}`;
        const textData = text.toUpperCase();
                return itemData.indexOf(textData) > -1;    
        }); 

    this.setState({ data: filteredData });  

    const filteredPhoneContactData = this.phoneContact.filter(item=>{
        const itemData2 = `${item.displayName.toUpperCase()}`;
        const textData = text.toUpperCase();

          return itemData2.indexOf(textData) > -1;  

        });
        this.setState({ phContacts: filteredPhoneContactData });  
}


render() {
    return (
        <View style={styles.mainContainer}>

            <TextInput 
            style={styles.searchInputStyle}
            placeholder="Search user"
            onChangeText={text=>this.searchFilter(text)}
            />
            </View>  
            {this.state.isLoading ?
                <ActivityIndicator size="large" color="#0000ff" /> :
                <FlatList  
                keyExtractor={(item, index) => index.toString()}
                data={this.state.data}
                renderItem={this.renderItem}/>  
            }

            {this.state.phContacts ? 
            <FlatList  

                                data={this.state.phContacts}
                                renderItem={this.renderContacts}

            /> : null}

        </View>

    );
}

}

1 Ответ

0 голосов
/ 09 марта 2020

Не отображать плоский список B, если ввод чистый. 

{
(this.state.phContacts && !inputText) ? 
  <FlatList  
    data={this.state.phContacts}
    renderItem={this.renderContacts}
  /> 
  :
  null
}

Но поскольку вы не поддерживаете входной запрос в состоянии, просто очистите список, когда вход пуст 

searchFilter = text => { 
  if(!text) {
    this.setState({phContacts: [], data: []});
    return;
  }
  ...
  ...
}
...