Lodash debounce 突然不工作了？答案

【问题标题】：Lodash debounce not working all of a sudden?Lodash debounce 突然不工作了？
【发布时间】：2019-11-09 16:07:54
【问题描述】：

我在一个较新的应用程序中使用我为一个应用程序编写的组件。代码在第一个正在运行的应用程序和第二个应用程序之间 99% 相同。一切都很好，只是 debounce 没有在新应用程序中激活。我做错了什么？

//  @flow
import type { Location } from "../redux/reducers/locationReducer";
import * as React from "react";
import { Text, TextInput, View, TouchableOpacity } from "react-native";
import { Input } from "react-native-elements";
import { GoogleMapsApiKey } from "../../.secrets";
import _, { debounce } from "lodash";
import { connect } from "react-redux";
import { setCurrentRegion } from "../redux/actions/locationActions";

export class AutoFillMapSearch extends React.Component<Props, State> {

  textInput: ?TextInput;
  state: State = {
    address: "",
    addressPredictions: [],
    showPredictions: false
  };
  async handleAddressChange() {
    console.log("handleAddressChange");
    const url = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${GoogleMapsApiKey}&input=${this.state.address}`;
    try {
      const result = await fetch(url);
      const json = await result.json();
      if (json.error_message) throw Error(json.error_message);
      this.setState({
        addressPredictions: json.predictions,
        showPredictions: true
      });
      // debugger;
    } catch (err) {
      console.warn(err);
    }
  }
  onChangeText = async (address: string) => {
    await this.setState({ address });
    console.log("onChangeText");
    debounce(this.handleAddressChange.bind(this), 800); // console.log(debounce) confirms that the function is importing correctly.
  };

  render() {
    const predictions = this.state.addressPredictions.map(prediction => (
      <TouchableOpacity
        style={styles.prediction}
        key={prediction.id}
        onPress={() => {
          this.props.beforeOnPress();
          this.onPredictionSelect(prediction);
        }}
      >
        <Text style={text.prediction}>{prediction.description}</Text>
      </TouchableOpacity>
    ));

    return (
      <View>
        <TextInput
          ref={ref => (this.textInput = ref)}
          onChangeText={this.onChangeText}
          value={this.state.address}
          style={[styles.input, this.props.style]}
          placeholder={"Search"}
          autoCorrect={false}
          clearButtonMode={"while-editing"}
          onBlur={() => {
            this.setState({ showPredictions: false });
          }}
        />
        {this.state.showPredictions && (
          <View style={styles.predictionsContainer}>{predictions}</View>
        )}
      </View>
    );
  }
}
export default connect(
  null,
  { setCurrentRegion }
)(AutoFillMapSearch);

【问题讨论】：

你不会对debounce的结果做任何事情。

标签： react-native lodash

【解决方案1】：

我注意到代码中的不同之处在于，旧应用程序调用handleAddressChange 作为setState 的第二个参数。 Flow 在新应用程序中抱怨这一点，所以我认为 async/awaiting setState 会以同样的方式工作。

所以把它改成这个很好用（由于某种原因没有流量投诉。可能是因为我已经安装了flow-typed lodash。上帝我爱flow-typed！）：

 onChangeText = async (address: string) => {
    this.setState(
      { address },
      _.debounce(this.handleAddressChange.bind(this), 800)
    );
  };

【讨论】：