如何解决快速拨号？

Question

我正在开发React本机应用程序。我正在使用React本机元素库。

我正在使用搜索栏。但是，当我键入的速度比键盘快时，搜索将无法正常工作。

示例；

我正在写“杰克”，但它叫“ Ja”。

我希望我能解释我的问题。因为我的英语不是很好。预先感谢您的帮助。

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

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

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

        var credentials = Base64.btoa(username + ':' + token);
        var URL         = `https://crm.example.com/api/v1/Lead?select=name,status&sortBy=createdAt&asc=false&offset=${offset}&maxSize=${maxSize}`;            

        await 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 { username, token, maxSize } = this.state;

            var credentials = Base64.btoa(username + ':' + token);
            var URL = "https://crm.example.com/api/v1/Lead?select=name,status&sortBy=createdAt&asc=false&where[0][type]=textFilter&where[0][value]=" + text;

            await axios.get(URL, { headers : { 'Espo-Authorization' : credentials }})
            .then(this.dataSearch.bind(this))
            .catch(this.dataFail.bind(this));
        }else {
            this.setState({ searchText: '' });
            this.handleRefresh();
        }            
    }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) {
    this.setState({ isLoading: false, leadList: response.data.list });
}

dataSearch(response) {
    this.setState({ isLoading: false, 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..."
                searchIcon={<Icon
                    name="search"
                    color="white"
                    size={21}
                />}
                onChangeText={this.searchLead.bind(this)}
                onClear={this.handleRefresh.bind(this)}
                onCancel={this.handleRefresh.bind(this)}
                value={searchText}
            />
            { isLoading ? <ActivityIndicator style={styles.loading} size="large" color="orange" /> :
                isSearch ?
                    <ScrollView>
                        <FlatList
                            data={searchData}
                            showLoading={true}
                            renderItem={({item}) =>
                                <ListItem                                    
                                    title={item.name}
                                    subtitle={item.status}
                                    bottomDivider={true}
                                />
                            }
                            keyExtractor={this.keyExtractor}
                            refreshing={isRefreshing}
                            onRefresh={this.handleRefresh}
                        />
                    </ScrollView> :                            
                    <FlatList
                        data={leadList}
                        renderItem={({item}) =>
                            <ListItem                                
                                title={item.name}
                                subtitle={item.status}
                                bottomDivider={true}
                            />
                        }
                        keyExtractor={this.keyExtractor}
                        refreshing={isRefreshing}
                        onRefresh={this.handleRefresh}
                        onEndReached={this.handleLoadMore}
                        onEndReachedThreshold={0.2}
                    />                            
            }
        </View>
    )
}
}

Answer 1

首先让我说我不太了解reactjs，但是我认为这可能行得通（尽管可能有更好的解决方案）

searchLead = (() => {
    let req;
    const delayedRequest = callback => {
        const timeout = setTimeout(callback, 500);
        return {
            cancel() {
                clearTimeout(timeout);
            }
        };
    };
    return (text) => {
        req && req.cancel();
        req = delayedRequest(async () => {
            try {
                if(text) {
                    this.setState({ searchText: text, isSearch: true, isLoading: true });

                    const { username, token, maxSize } = this.state;

                    var credentials = Base64.btoa(username + ':' + token);
                    var URL = "https://crm.example.com/api/v1/Lead?select=name,status&sortBy=createdAt&asc=false&where[0][type]=textFilter&where[0][value]=" + text;

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