Вызов функции dataSuccess каждый раз - PullRequest
Новая
       7

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

0 голосов
/ 22 марта 2019

Я использую панель поиска 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.log('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>
    );
  }
}

1 Ответ

1 голос
/ 22 марта 2019

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

Вам следует использовать setState функцию обратного вызова param, которая будет запущена после обновления состояния.this.setState({ foo: 'bar' }, () => console.log(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');
  // ...
});
...