undifined 不是 React Native 中的 object

Question

I'm making an autocomplete with react native. I pulled the data from the API

The following is the API list:

{
  "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"
    },
]
}

when i get with fetch, i get into trouble ie,

undifined is not an object in (evaluating kecamatan.filter)

here is my code

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>
    );
  }

please correct, this condition I want to find the name of the district using autocomplete, where I am wrong

Answer 1

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

}

Change const { results: kecamatan } to const { kecamatan } and then it will properly assign it to the state.

Answer 2

I see 2 problems in your filter function:

You're extracting kecamatan from state incorrectly, it should be:

const { kecamatan } = this.state;

You're using the same name for the array and the item, you should use a different name inside your filter like this:

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

Answer 3

results is not defined on the API response.

So when you do const { results: kecamatan } = json; , kecamatan is undefined, which you then set to state. So replace this with const { kecamatan } = json;

Answer 4

You have kecamatan.kecamatan.search(regex) >= 0)

I do not think you have 2 layers of kecamatan as you already pulled it out of the state above?

const { kecamatan } = this.state;

Answer 5

Your kecamatan array is undefined because of the way you have set your fetch results. result is not a key on the returned JSON, so you are trying to filter on undefined . You want const { kecamatan } = json;

If your fetch does ever come back as undefined , you can guard your filter operation (ie instead of return kecamatan.filter(result =>... , you could do return (kecamatan || []).filter(result =>... (or in recent Typescript return kecamatan?.filter(result =>... .

Also, don't name your iterable the same as its member, you may get unexpected effects. This is why I changed kecamatan.filter(kecamatan => to kecamatan.filter(result => .