Дебад Лодаша не работает внезапно? - PullRequest
Новая
       17

Дебад Лодаша не работает внезапно?

0 голосов
/ 27 июня 2019

Я использую компонент, который я написал для одного приложения, в новом приложении.Код примерно на 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);

1 Ответ

0 голосов
/ 27 июня 2019

Я заметил, что разница в коде заключалась в том, что старое приложение вызывало handleAddressChange в качестве второго аргумента для setState. Поток жаловался на это в новом приложении, поэтому я подумал, что async/await ing setState будет работать так же.

Так что изменение его на это работает нормально (без каких-либо жалоб на поток по какой-то причине. Возможно, потому что я с тех пор установил flow-typed lodash. Боже, я люблю flow-typed!): 

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