Question

我正在使用本机进行自动完成。我从API中提取了数据

以下是API列表：

{
  "status": 200,
  "error": false,
  "kecamatan": [
    {
      "id_kecamatan": "1",
      "kecamatan": "Gambir",
      "kode": "CGK12020",
      "id_kota": "1",
      "kota": "Jakarta Pusat",
      "id_provinsi": "1",
      "provinsi": "DKI Jakarta"
    },
    {
      "id_kecamatan": "2",
      "kecamatan": "Tanah Abang",
      "kode": "CGK12080",
      "id_kota": "1",
      "kota": "Jakarta Pusat",
      "id_provinsi": "1",
      "provinsi": "DKI Jakarta"
    },
]
}

当我获取数据时，就会遇到麻烦，即

未定义不是（评估kecamatan.filter）中的对象

这是我的代码

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

  componentDidMount() {
    fetch(`${API}/kecamatan/`)
      .then(res => res.json())
      .then((json) => {
        console.log(json)
        const { results: kecamatan } = json;
        this.setState({ kecamatan });
      });
  }

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

    const { kecamatan } = this.state;
    const regex = new RegExp(`${query.trim()}`, 'i');
    return kecamatan.filter(kecamatan => kecamatan.kecamatan.search(regex) >= 0);
  }

  render() {
    const { query } = this.state;
    const kecamatan = this.find(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={kecamatan.length === 1 && comp(query, kecamatan[0].kecamatan) ? [] : kecamatan}
            defaultValue={query}
            onChangeText={text => this.setState({ query: text })}
            placeholder="Enter Star Wars film title"
            renderItem={({ item }) => (
              <TouchableOpacity
                onPress={() => this.setState({ query: item.kecamatan })}
              >
                <Text style={styles.itemText}>{item.kecamatan}</Text>
              </TouchableOpacity>
            )}

          />
      </View>
    );
  }

请更正，这种情况下我想使用自动填充功能找到我所在的地区的名称，

Answer 1

componentDidMount() {
fetch(`${API}/kecamatan/`)
  .then(res => res.json())
  .then((json) => {
    console.log(json)
    const { results: kecamatan } = json;
    this.setState({ kecamatan });
  });

}

将const { results: kecamatan }更改为const { kecamatan }，然后它将正确分配给该状态。

Answer 2

我在您的过滤器功能中发现2个问题：

您错误地从状态中提取了凯卡马坦，应该是：

const { kecamatan } = this.state;

您为数组和项目使用了相同的名称，您应该在过滤器中使用其他名称，如下所示：

return kecamatan.filter(item => item.kecamatan.search(regex) >= 0);

Answer 3

在API响应中未定义

results。

因此，当您执行const { results: kecamatan } = json;时，kecamatan是未定义的，然后将其设置为state。因此，将其替换为const { kecamatan } = json;

Answer 4

您有kecamatan.kecamatan.search(regex) >= 0)

我不认为您有2层kecamatan，因为您已经将其从上面的状态中拉出来了？

const { kecamatan } = this.state;

Answer 5

由于设置获取结果的方式，您的kecamatan数组为undefined。 result不是返回的JSON上的键，因此您正在尝试对undefined进行过滤。您要const { kecamatan } = json;

如果获取的内容确实以undefined的形式返回，则可以保护您的过滤器操作（即，可以代替return kecamatan.filter(result => ...进行return (kecamatan || []).filter(result => ...（或在最近的打字稿{{1}中） }。

此外，不要将可迭代对象的名称与其成员相同，您可能会得到意想不到的效果。这就是为什么我将return kecamatan?.filter(result => ...更改为kecamatan.filter(kecamatan =>的原因。

未定义不是响应本机中的对象

5 个答案: