How to call an async function in TextInput's onChangeText

Question

Here is my code

SearchFilterFunction(text) {
callApi = async () => {
  try {
    const response = await 
fetch('http://192.168.100.229:9085/api/V1AndroidUnAuthorizedFastSearch? 
title=${text}');
    const responseJson = await response.json();
    this.setState({
      isLoading: false,
      dataSource: responseJson.data,
    }, function () {
    });
  }
  catch (error) {
    console.error(error);
  }
 }
}


render() {

return (

  <View style={{ flexDirection: 'column' }}>

    <View style={{
      flexDirection: 'column',
      alignItems: 'stretch',
    }}>
      <View style={{
        height: 50,
        backgroundColor: '#008cff',
        flexDirection: 'row',
        justifyContent: 'space-between'

      }} >
        <Image source={require('./asset/ic_buy_package.png')}
          style={{ width: 30, height: 30, marginTop: 10, marginLeft: 10 }} 
  />

        <Image source={require('./asset/img_logo.png')}
          style={{ width: 30, height: 30, marginTop: 10 }} />

        <TouchableHighlight onPress={this.callApi}>
          <Image source={require('./asset/ic_menu.png') }
            style={{ width: 30, height: 30, marginTop: 10, marginRight: 
  10, }}
          />
        </TouchableHighlight>
      </View>
    </View>

    <View style={{
      height: 50,
      backgroundColor: "#008cff"
    }}>
      <TextInput
        style={{ height: 40, backgroundColor: '#ffffff', marginRight: 10, 
   marginLeft: 10, marginTop: 5, textAlign: 'right', paddingRight: 10 }}
        placeholder='جستجو...'

      onChangeText={text => this.SearchFilterFunction(text).callApi}
      onClear={text => this.SearchFilterFunction().callApi}
      />

    </View>

    <Text>{this.state.input}</Text>

    <FlatList
      data={this.state.dataSource}
      renderItem={({item}) => <Text style={{fontSize:15,margin:10}}> 
    {item.title}</Text>}
      keyExtractor={({id}, index) => id}
    />
  </View>


   );
  }
 };

but when type in TextInput i get this error

undefined is not an object (evaluating'_this3.searchfilterfunction(text).callApi'

I want get text from TextInput and fetch my API with the entered text.

1

Did my solution work for you? – Tim May 12 '19 at 10:09

score 1 · Accepted Answer · answered May 12 '19 at 09:19

There are several problems here:

1) You are defining a function inside a function

SearchFilterFunction(text) {
callApi = async () => {

2) If you want to insert a variable value inside a string use ` instead of '.

3) This function call does not work this.SearchFilterFunction(text).callApi

Modifications:

Change your function to SearchFilterFunction to:

async SearchFilterFunction(text) {
try {
  const response = await 
  fetch(`http://192.168.100.229:9085/api/V1AndroidUnAuthorizedFastSearch? 
   title=${text}`);

  const responseJson = await response.json();
  console.log('response', responseJson); 
  // set your state here 
}
catch (error) {
  console.error(error);
}
}

Change your TextInput to:

 <TextInput
  style={{ height: 40, backgroundColor: '#ffffff', marginRight: 10, 
  marginLeft: 10, marginTop: 5, textAlign: 'right', paddingRight: 10 }}

  onChangeText={text => this.SearchFilterFunction(text)}
  onClear={text => this.SearchFilterFunction()}
 />

Working example:

I created a simplified working example here:

https://snack.expo.io/S1LWHvH2V

How to call an async function in TextInput's onChangeText

1 Answers1