过滤器函数中的类型错误

安贾利

我正在尝试在 React Native 中制作一个自动完成文本框。我在过滤器功能中遇到错误。当用户键入服务时,文本框应自动填写服务的全名。服务名称来自我的 json 文件。我正在使用“react-native-autocomplete-input”来实现这一点。以下是错误的屏幕截图:

在此处输入图片说明

下面是我的 App.js 代码。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */



import service from './services.json';


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



class Autocomp extends Component {
  static renderServices(coservice) {
    const { ser, Location, secondLoc} = coservice;


    return (
      <View>
        <Text style={styles.titleText}>{ser}</Text>
        <Text style={styles.openingText}>{secondLoc}</Text>
      </View>
    );
  }

  constructor(props) {
    super(props);
    this.state = {
       query: '',
       services:[]
    };
  }

  componentDidMount(){
      const {results: services} = service;
      this.setState({services});

  }




    findServices(query) {
      const inputValue = query.trim().toLowerCase();
      const inputLength = inputValue.length;

      const { services } = this.state;
      return inputLength === 0 ? [] : services.filter(ser =>ser.toLowerCase().slice(0, inputLength) === inputValue);
  }




  render() {
    const { query } = this.state;
    const services = this.findServices(query);
    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();

    return (
      <View style={styles.container}>
        <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteContainer}
          data={services.length === 1 && comp(query, services[0].ser) ? [] : services}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Enter Services here"
          renderItem={({ ser, Phone }) => (
            <TouchableOpacity onPress={() => this.setState({ query: ser })}>
              <Text style={styles.itemText}>
                {ser} 
              </Text>
            </TouchableOpacity>
          )}
        />
        <View style={styles.descriptionContainer}>
          {services.length > 0 ? (
            Autocomp.renderServices(services[0])
          ) : (
            <Text style={styles.infoText}>
              Enter services
            </Text>
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    flex: 1,
    paddingTop: 25
  },
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  },
  itemText: {
    fontSize: 15,
    margin: 2
  },
  descriptionContainer: {
    // `backgroundColor` needs to be set otherwise the
    // autocomplete input will disappear on text input.
    backgroundColor: '#F5FCFF',
    marginTop: 25
  },
  infoText: {
    textAlign: 'center'
  },
  titleText: {
    fontSize: 18,
    fontWeight: '500',
    marginBottom: 10,
    marginTop: 10,
    textAlign: 'center'
  },
  directorText: {
    color: 'grey',
    fontSize: 12,
    marginBottom: 10,
    textAlign: 'center'
  },
  openingText: {
    textAlign: 'center'
  }
});
export default Autocomp;

下面是我的 services.json 文件

{
    "id":1,
    "ser": "Service1",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"[email protected]",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },

  {
    "id":1,
    "ser": "TestService",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"[email protected]",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },
  ]

任何帮助将不胜感激。我检查了功能。一切看起来都正确。

不列颠瓦迪亚

假设您的json文件如此处所示,您的代码存在两个问题。

  • 解构是错误的。由于您直接从json文件中导入一个对象作为 name services它没有被分配给任何命名的 constant / variable,因此它不能被解构。

因此,您必须将代码更改为

import services from './services.json';

componentDidMount(){
      this.setState({services});
  }
  • 你想转换一个service对象 toLowerCase在这里
    ser =>ser.toLowerCase()需要被改变

    services.filter(({ser}) => ser.toLowerCase().slice(0, inputLength) === inputValue);
    

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Matlab中的函数过滤器

来自分类Dev

未捕获的类型错误:obj[key].includes 不是过滤器内的函数

来自分类Dev

Python中过滤器错误

来自分类Dev

dplyr 过滤器中的特殊错误

来自分类Dev

Typescript过滤器中的回调函数的类型是什么?

来自分类Dev

在Angular中,类型“ OperatorFunction <any,any>”错误不存在获取属性“过滤器”

来自分类Dev

在 React 中过滤结果的过滤器函数的可变版本?

来自分类Dev

r dplyr过滤器错误-列的类型不受支持

来自分类Dev

Vue 过滤器类型错误和渲染

来自分类Dev

带过滤器的函数中未实现参数,但没有错误消息

来自分类Dev

布隆过滤器中的过滤器索引和哈希函数

来自分类Dev

过滤器不是函数

来自分类Dev

angularjs过滤器错误

来自分类Dev

错误的搜索过滤器

来自分类Dev

R中的dplyr过滤器中的函数参数

来自分类Dev

什么类型的过滤器是“过滤器”命令

来自分类Dev

JFileChooser在过滤器中添加不同的文件类型

来自分类Dev

PyCharm警告:字典中过滤器的类型异常

来自分类Dev

Spring中的组件扫描过滤器类型

来自分类Dev

JFileChooser在过滤器中添加不同的文件类型

来自分类Dev

在过滤器中从$ rootScope调用实用函数

来自分类Dev

如何访问jQuery过滤器函数中的元素?

来自分类Dev

如何访问jQuery过滤器函数中的元素?

来自分类Dev

R中的过滤器函数是如何工作的

来自分类Dev

在 Swift 中以高阶函数(映射、过滤器等)流式传输

来自分类Dev

sqlalchemy中过滤器函数的异常返回格式

来自分类Dev

忽略过滤器函数中的参数

来自分类Dev

如何在此表单函数中添加错误词过滤器(如果存在错误词,则不会提交)

来自分类Dev

可能是GeoShape过滤器(NEST)中的错误

Related 相关文章

  1. 1

    Matlab中的函数过滤器

  2. 2

    未捕获的类型错误:obj[key].includes 不是过滤器内的函数

  3. 3

    Python中过滤器错误

  4. 4

    dplyr 过滤器中的特殊错误

  5. 5

    Typescript过滤器中的回调函数的类型是什么?

  6. 6

    在Angular中,类型“ OperatorFunction <any,any>”错误不存在获取属性“过滤器”

  7. 7

    在 React 中过滤结果的过滤器函数的可变版本?

  8. 8

    r dplyr过滤器错误-列的类型不受支持

  9. 9

    Vue 过滤器类型错误和渲染

  10. 10

    带过滤器的函数中未实现参数,但没有错误消息

  11. 11

    布隆过滤器中的过滤器索引和哈希函数

  12. 12

    过滤器不是函数

  13. 13

    angularjs过滤器错误

  14. 14

    错误的搜索过滤器

  15. 15

    R中的dplyr过滤器中的函数参数

  16. 16

    什么类型的过滤器是“过滤器”命令

  17. 17

    JFileChooser在过滤器中添加不同的文件类型

  18. 18

    PyCharm警告:字典中过滤器的类型异常

  19. 19

    Spring中的组件扫描过滤器类型

  20. 20

    JFileChooser在过滤器中添加不同的文件类型

  21. 21

    在过滤器中从$ rootScope调用实用函数

  22. 22

    如何访问jQuery过滤器函数中的元素?

  23. 23

    如何访问jQuery过滤器函数中的元素?

  24. 24

    R中的过滤器函数是如何工作的

  25. 25

    在 Swift 中以高阶函数(映射、过滤器等)流式传输

  26. 26

    sqlalchemy中过滤器函数的异常返回格式

  27. 27

    忽略过滤器函数中的参数

  28. 28

    如何在此表单函数中添加错误词过滤器(如果存在错误词,则不会提交)

  29. 29

    可能是GeoShape过滤器(NEST)中的错误

热门标签

归档