Question

有人可以帮我调试这段代码，我想使用'react-native-autocomplete-input'库自动完成搜索文本输入，基本上api请求返回一个股票代码和公司名称列表和我我想在本地存储这个文件以使其更快，因为现在我只想让它使用fetch工作。自动填充功能必须在responseJson.symbol

中搜索

这是我到目前为止所做的：

import Autocomplete from 'react-native-autocomplete-input';
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, Platform,
        ScrollView, View, ActivityIndicator,
        } from 'react-native';

class AutocompleteExample extends Component {
constructor(props) {
    super(props);
    this.state = {
      symbols: [],
      query: '',
    };
  }

searchSymbol(query) {
  if (query === '') {
      return [];
    }

const { symbols } = this.state;
const url = `https://api.iextrading.com/1.0/ref-data/symbols`;

fetch(url)
.then((response) => response.json())
  .then((responseJson) => {
    this.setState({
      symbols:responseJson.symbol,
    });
  })
  .catch((error) => {
    console.error(error);
  });
return symbols;
}

render() {
  if (this.state.isLoading) {
    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <ActivityIndicator />
      </View>
    );
  }
    const { query } = this.state;
    const symbols = this.searchSymbol(query);

    return (

      <ScrollView>
        <View style={styles.MainContainer}>
        <Text style={{fontSize: 12,marginBottom:10}}> Type your favorite stock</Text>
        <Autocomplete
          autoCapitalize={true}
          containerStyle={styles.autocompleteContainer}
          data={symbols}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Enter symbol"
          renderItem={({ symbol }) => (
            <TouchableOpacity onPress={() => this.setState({ query: symbol })}>
              <Text style={styles.itemText}>
                {symbol}
              </Text>
            </TouchableOpacity>
          )}
        />


      </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({

MainContainer :{
  justifyContent: 'center',
  flex:1,
  paddingTop: (Platform.OS === 'ios') ? 20 : 20,
  padding: 5,
},
autocompleteContainer: {
  borderWidth: 1,
  zIndex:999,
  borderColor: '#87ceeb',
},
itemText: {
  fontSize: 17,
  color:'#000000',
}
});

module.exports = AutocompleteExample

我在控制台上看不到任何错误，api请求工作正常，我无法访问symbols const我是否必须渲染类似cloneWithRows(responseJson.symbols)的内容？谢谢

Answer 1

首先，searchSymbol方法应该是组件构造函数中的binded，或者声明为class property。否则，“this”将不指向组件实例。

然后，您的状态似乎没有isLoading属性，但您在渲染函数中使用它。

您应该做的是在componentDidMount生命周期方法中调用异步searchSymbol方法。当fetch的promise得到解决时，你应该将结果放在状态中，并将isLoading boolean设置为false。然后，您的组件将使用现有数据重新渲染。

使用本机反应自动完成

1 个答案: