Question

我在较新的应用程序中使用为一个应用程序编写的组件。该代码在正在运行的第一个应用程序与第二个应用程序之间有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);

Answer 1

我注意到代码的区别在于，较旧的应用程序调用{{1}}作为handleAddressChange的第二个参数。 Flow在新应用中对此有所抱怨，因此我认为setState和async/await的工作方式相同。

因此将其更改为这种方法很好（由于某种原因没有流量投诉。也许是因为我已经安装了setState。我爱上帝flow-typed lodash！）

flow-typed

Lodash突然反跳了吗？

1 个答案: