Вызов функции dataSuccess каждый раз

Я использую панель поиска React Native Elements. Каждый раз, когда я звоню ему, вызывается функция dataSuccess. При поиске должна работать только функция searchLead.

Я прочитал документацию по панели поиска собственных элементов React. Это все еще не сработало. Я думаю, что у меня проблема с моим алгоритмом. Я надеюсь, что я могу сказать. Есть ли лучший пример использования панели поиска?

Делюсь с вами всем кодом.

Заранее спасибо за вашу помощь.

export default class Lead extends Component {
  constructor (props) {
    super(props);

    this.state = {
      isLoading: true,
      isRefreshing: false,
      searchText: '',
      isSearch: false,
      offset: 0,
      maxSize: 10,
      leadList: [],
      searchData: []
    };
  }

  componentWillMount () {
    this.setState({ isLoading: true });
  }

  componentDidMount () {
    this.loadData();
  }

  handleRefresh = () => {
    this.setState({
      offset: 0,
      maxSize: 10,
      isSearch: false,
      isRefreshing: true
    }, () => {
      this.loadData();
    });
  };

  handleLoadMore = () => {
    this.setState({
      maxSize: this.state.maxSize + 5
    }, () => {
      this.loadData();
    });
  };

  keyExtractor = (item, index) => index.toString();

  loadData = async () => {
    try {
      const { offset, maxSize } = this.state;

      const username = await AsyncStorage.getItem('username');
      const token = await AsyncStorage.getItem('token');

      var credentials = Base64.btoa(username + ':' + token);
      var URL = `http://demo.espocrm.com/advanced/api/v1/Lead?sortBy=createdAt&asc&offset=${offset}&maxSize=${maxSize}`;

      axios.get(URL, { headers: { 'Espo-Authorization': credentials } })
        .then(this.dataSuccess.bind(this))
        .catch(this.dataFail.bind(this));
    } catch (error) {
      Alert.alert(
        'Hata',
        'Bir hata meydana geldi. Lütfen yöneticiye başvurunuz.',
        [
          { text: 'Tamam', onPress: () => null }
        ]
      );
    }
  };

  searchLead = async (text) => {
    try {
      if (text) {
        this.setState({ searchText: text, isSearch: true, isLoading: true });

        const { searchText, maxSize } = this.state;
        const username = await AsyncStorage.getItem('username');
        const token = await AsyncStorage.getItem('token');

        var credentials = Base64.btoa(username + ':' + token);
        var URL = `http://demo.espocrm.com/advanced/api/v1/Lead?select=name&orderBy=createdAt&order=desc&where[0][type]=textFilter&where[0][value]=${searchText}&maxSize=${maxSize}`;

        axios.get(URL, { headers: { 'Espo-Authorization': credentials } })
          .then(this.dataSearch.bind(this))
          .catch(this.dataFail.bind(this));
      }
    } catch (error) {
      Alert.alert(
        'Hata',
        'Arama başarısız oldu. Lütfen yöneticiniz ile görüşün.',
        [
          { text: 'Tamam', onPress: () => null }
        ]
      );
    }
  }

  dataSuccess (response) {
    console.info('test');
    this.setState({ isRefreshing: false, isLoading: false, leadList: response.data.list });
  }

  dataSearch (response) {
    this.setState({ isRefreshing: false, isLoading: false, isSearch: true, searchData: response.data.list });
  }

  dataFail (error) {
    this.setState({ isLoading: false });

    Alert.alert(
      'Hata',
      'Beklenmedik bir hata oluştu',
      [
        { text: 'Tamam', onPress: () => null }
      ]
    );
  }

  render () {
    const { isLoading, isRefreshing, searchText, isSearch, leadList, searchData } = this.state;
    return (
      <View style = {styles.container}>
        <SearchBar
          placeholder = "Bir lead arayın..."
          onChangeText = {this.searchLead.bind(this)}
          value = {searchText}
        />
        {
          isLoading ? <ActivityIndicator style = {styles.loading} size = "large" color = "orange" />
            : isSearch
              ? <FlatList
                data = {searchData}
                renderItem = {({ item }) =>
                  <ListItem
                    leftAvatar = {{ source: { uri: 'https://pbs.twimg.com/profile_images/567081964402790401/p7WTZ0Ef_400x400.png' } }}
                    title = {item.name}
                    subtitle = {item.status}
                    bottomDivider = {true}
                  />
                }
                keyExtractor = {this.keyExtractor}
                refreshing = {isRefreshing}
                onRefresh = {this.handleRefresh}
                onEndReached = {this.handleLoadMore}
                onEndReachedThreshold = {0.5}
              />
              : <FlatList
                data = {leadList}
                renderItem = {({ item }) =>
                  <ListItem
                    leftAvatar = {{ source: { uri: 'https://pbs.twimg.com/profile_images/567081964402790401/p7WTZ0Ef_400x400.png' } }}
                    title = {item.name}
                    subtitle = {item.status}
                    bottomDivider = {true}
                  />
                }
                keyExtractor = {this.keyExtractor}
                refreshing = {isRefreshing}
                onRefresh = {this.handleRefresh}
                onEndReached = {this.handleLoadMore}
                onEndReachedThreshold = {0.5}
              />
        }
      </View>
    );
  }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
43
1

Ответы 1

setState — это асинхронная функция, и если вы хотите использовать переменную состояния сразу после ее установки.

Вы должны использовать функцию параметра обратного вызова setState, которая будет запущена после обновления состояния. this.setState({ foo: 'bar' }, () => console.info(this.state.foo))

Взгляните на код ниже

this.setState({ searchText: text, isSearch: true, isLoading: true }, async () => {
  const { searchText, maxSize } = this.state;
  const username = await AsyncStorage.getItem('username');
  const token = await AsyncStorage.getItem('token');
  // ...
});

Другие вопросы по теме