Как вызвать асинхронную функцию в onChangeText TextInput - PullRequest
Новая
       47

Как вызвать асинхронную функцию в onChangeText TextInput

0 голосов
/ 12 мая 2019

Вот мой код 

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>


   );
  }
 };

, но при вводе в TextInput я получаю эту ошибку

undefined не является объектом (оценивание'_this3.searchfilterfunction (text) .callApi'

Я хочу получить текст из TextInput и получить мой API с введенным текстом.

1 Ответ

1 голос
/ 12 мая 2019

Здесь есть несколько проблем:

1) Вы определяете функцию внутри функции 

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

2) Если вы хотите вставить значение переменной внутри строки, используйте вместо нее `из '.

3) Этот вызов функции не работает this.SearchFilterFunction(text).callApi

Модификации:

Измените свою функцию на SearchFilterFunction на: 

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);
}
}

Измените ваш TextInput на: 

 <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()}
 />

Рабочий пример:

Я создал упрощенный рабочий пример здесь:

https://snack.expo.io/S1LWHvH2V

...