React-native-multiple-select: Cannot read the property 'getSelectedItemsExt' of undefined

问题

I am building an App and referring this link i implemented same code for my App, but i am getting error "Cannot read the property 'getSelectedItemsExt' of undefined". One more error is "submit" button is also not showing up. I have tried all the ways but failed.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, ListView, Alert, Button,     Platform, ToastAndroid, TouchableOpacity, ActivityIndicator, Text, Picker, ScrollView }
from 'react-native';
import { StackNavigator } from 'react-navigation';
import MultiSelect from 'react-native-multiple-select';


class manage_publishers extends Component {
static navigationOptions = {
    title: 'Manage Publishers',
};

constructor() {
    super()
    this.state = {
        isLoading: true,
        selectedPublishers1:[],
        publishersByCategory: [],
        publishersByClient: [],
        publishersByGroup: [],
        dataSource:[]
    }
}

componentDidMount() 
{
    const base64 = require('base-64');
    fetch('APIURL'+this.props.navigation.state.params.id, 
    {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            "Authorization": "Basic " + base64.encode("ABC:XYZ")
        }
    }).then((response) => response.json()
    )
        .then((responseJson) => {
            this.setState({
                categories: responseJson.PublisherByCategory,
            }, function () {

        });
    })
    .catch((error) => {
        console.log("error in category");
        console.log(error);
    });


}

onSelectedPublishersByCategoryChange = (publishersByCategory) => {
    console.log(publishersByCategory);
    this.setState({ publishersByCategory });
}



render() {
    const { navigate } = this.props.navigation;
    if (this.state.isLoading) {
    return (
    <View style={{ flex: 1, paddingTop: 20 }}>
      <ActivityIndicator />
    </View>
  );
}
return ([
  <View style={{flex: 1,paddingTop: (Platform.OS === 'ios') ? 20 : 20, padding: 5}}>
    <Text style={{ padding: 5, fontSize: 35, backgroundColor: '#2196F3', marginBottom: 7 }}>
        Manage Publishers
    </Text>
    <MultiSelect
      items={this.state.categories}
      uniqueKey="id"
      ref={(component) => { this.multiSelect = component }}
      onSelectedItemsChange={this.onSelectedPublishersByCategoryChange}
      selectedItems={this.state.publishersByCategory}
      selectText="Publishers by Category"
      searchInputPlaceholderText="Search Publisher..."
      onChangeInput={ (text)=> console.log(text)}
      altFontFamily="ProximaNova-Light"
      tagRemoveIconColor="#CCC"
      tagBorderColor="#CCC"
      tagTextColor="#CCC"
      selectedItemTextColor="#CCC"
      selectedItemIconColor="#CCC"
      itemTextColor="#000"
      displayKey="name"
      searchInputStyle={{ color: '#CCC' }}
      submitButtonColor="#CCC"
      submitButtonText="Submit"
    />
  </View>,
  <View>
     {this.multiSelect.getSelectedItemsExt(selectedItems)} 
  </View>
 ]);
}
}
});

 module.exports = manage_publishers;

Please have a look at this and provide me solution, I'll be very thankful .

回答1:

I had that same issue, and I solved adding a AND condition:

{this.multiSelect && this.multiSelect.getSelectedItemsExt(selectedItems)}

回答2:

If you are using functional components you can do like this,

create ref like this,

    const multiSelect = useRef(null)

Access the getSelectedItemsExt function like this,

<View>
   {multiSelect.current && multiSelect.current.getSelectedItemsExt && 
    multiSelect.current.getSelectedItemsExt(countries)}
</View>

回答3:

It happened because you called a method before the reference has been set. Use this code:

  <View>
      { this.multiSelect ? this.multiSelect.getSelectedItemsExt(selectedItems) : null}
   </View>

Reference to this issue:

https://github.com/toystars/react-native-multiple-select/issues/58#issuecomment-364136438

来源：https://stackoverflow.com/questions/49442714/react-native-multiple-select-cannot-read-the-property-getselecteditemsext-of

标签

react-native

react-native-android

multiple-select