React native 筛选器函数中的类型错误

我试图在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;

我们将非常感谢您的帮助。我检查了功能。一切看起来都是正确的。

假设您的json文件如图所示，您的代码有两个问题

破坏结构是错误的。由于您直接将json文件中的对象作为名称服务导入，而该对象尚未分配给任何命名常量/变量，因此无法对其进行分解。 因此，您必须将代码更改为

import services from './services.json';

componentDidMount(){
      this.setState({services});
  }

您正在尝试将服务对象转换为小写 ser=>ser.toLowerCase 哪些需要更改为

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

---

你能添加你的services.json吗？对不起，忘了添加。我刚刚编辑了我的帖子。Added services.json文件谢谢您，Pritish。我只是在线学习React Native课程，同时开发代码，所以会犯错误。谢谢你的帮助！

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