React Native用react-native-autocomplete-input报“Undefined is not a function”错误求助

你好！作为React Native新手遇到这个报错太正常了，我帮你梳理几个最可能的原因和对应的解决办法：

1. 先检查你的services.json数据格式 #

首先得确保你的services.json是数组格式，这是最容易踩的坑！比如：
如果是纯服务名称数组：

[
  "service1",
  "service2",
  "service3"
]

如果是带字段的对象数组（比如每个项有name属性）：

[
  { "name": "service1" },
  { "name": "service2" }
]

要是你的JSON不是数组（比如是单个对象），后续过滤数据的时候肯定会触发“undefined is not a function”报错。

2. 检查Autocomplete的filter方法写法 #

react-native-autocomplete-input的核心是过滤函数，很多新手会在这里写错逻辑。

如果你的services是纯字符串数组，正确的过滤函数应该是这样：

const filterServices = (inputValue, servicesList) => {
  return servicesList.filter(service =>
    service.toLowerCase().includes(inputValue.toLowerCase())
  );
};

如果是对象数组（比如每个项有name字段），就要改成：

const filterServices = (inputValue, servicesList) => {
  return servicesList.filter(item =>
    item.name.toLowerCase().includes(inputValue.toLowerCase())
  );
};

然后在Autocomplete组件里要正确引用这个函数：

<Autocomplete
  data={filterServices(this.state.inputValue, service)}
  // 其他属性...
/>

要是直接把service.filter(...)硬写在data属性里，或者函数内部没正确处理数据，大概率会触发报错。

3. 确保组件state初始化正确 #

一定要在组件的state里初始化输入值，不然第一次渲染时filter函数可能接收到undefined：

constructor(props) {
  super(props);
  this.state = {
    inputValue: '',
  };
}

完整可运行示例代码 #

给你一个现成的示例，你可以对照着改自己的代码：

/**
 * Sample React Native App
 */
import React, { Component } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';
import Autocomplete from 'react-native-autocomplete-input';
import services from './services.json'; // 确保这是数组格式

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }

  // 封装过滤函数
  filterServices = (inputValue) => {
    if (!inputValue) return []; // 输入为空时返回空数组，避免不必要的过滤
    return services.filter(service =>
      service.toLowerCase().includes(inputValue.toLowerCase())
    );
  };

  render() {
    const { inputValue } = this.state;
    const filteredServices = this.filterServices(inputValue);

    return (
      <View style={styles.container}>
        <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          value={inputValue}
          onChangeText={(text) => this.setState({ inputValue: text })}
          data={filteredServices}
          renderItem={({ item }) => (
            <View style={styles.itemContainer}>
              <Text style={styles.itemText}>{item}</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    paddingHorizontal: 15,
  },
  itemContainer: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  itemText: {
    fontSize: 16,
  },
});

额外排查小细节 #

• 确认你已经正确安装插件：npm install react-native-autocomplete-input --save（或者用yarn）
• 检查导入语句：import Autocomplete from 'react-native-autocomplete-input';有没有写错
• 如果你的JSON是嵌套结构（比如外层有个services字段），那导入后要使用services.services来获取数组，不能直接用service

内容的提问来源于stack exchange，提问作者Anjali