Javascript Undefined不是react native中的对象

我正在用react native自动完成。我从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"
    },
]
}

当我和fetch在一起时，我就有麻烦了

Undefined不是（计算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>
    );
  }

构造函数（道具）{
超级（道具）；
此.state={
凯卡马坦：[]，
查询：“”，
};
}
componentDidMount（）{
获取（`${API}/kecamatan/`）
.then（res=>res.json（））
。然后（（json）=>{
console.log（json）
const{results:kecamatan}=json；
this.setState（{kecamatan}）；
});
}
查找（查询）{
如果（查询==''）{
返回[]；
}
const{kecamatan}=this.state；
const regex=new RegExp（`${query.trim（）}`，'i'）；
返回kecamatan.filter（kecamatan=>kecamatan.kecamatan.search（regex）>=0）；
}
render（）{
const{query}=this.state；
const kecamatan=this.find（查询）；
常量comp=（a，b）=>a.toLowerCase（）.trim（）==b.toLowerCase（）.trim（）；
返回(
this.setState（{query:text}）}
占位符=“输入星球大战电影标题”
renderItem={（{item}）=>(
this.setState（{query:item.kecamatan}）}
>
{item.kecamatan}
)}
/>
);
}

---

请更正，此条件我想使用自动完成查找地区名称，我错了

您有

kecamatan.kecamatan.search（regex）>=0）

我不认为您有两层

kecamatan

，因为您已经将其从上述状态中拉出了

---

const{kecamatan}=this.state
您有
kecamatan.kecamatan.search（regex）>=0）

我不认为您有两层
kecamatan
，因为您已经将其从上述状态中拉出了

const{kecamatan}=this.state
由于设置获取结果的方式，您的
kecamatan
数组未定义
result
不是返回的JSON上的键，因此您尝试在
undefined
上进行筛选。您需要
const{kecamatan}=json

如果您的取回确实返回为未定义的
，
，您可以保护您的筛选操作（即，您可以执行
返回kecamatan.filter（result=>…
），而不是
返回kecamatan.filter（kecamatan | |[]）。筛选（result=>，
（或者在最近的Typescript中
返回kecamatan？.filter（result=>，
）

另外，不要将您的iterable命名为与其成员相同的名称，您可能会得到意外的效果。这就是我将
kecamatan.filter（kecamatan=>
更改为
kecamatan.filter的原因（result=>
您的
kecamatan
数组是
未定义的
，这是因为您设置获取结果的方式。
result
不是返回的JSON上的键，所以您尝试在
未定义的
上进行筛选。您想要
const{kecamatan}=JSON；

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

如果您的取回确实返回为未定义的
，
，您可以保护您的筛选操作（即，您可以执行
返回kecamatan.filter（result=>…
），而不是
返回kecamatan.filter（kecamatan | |[]）。筛选（result=>，
（或者在最近的Typescript中
返回kecamatan？.filter（result=>，
）

另外，不要将您的iterable命名为与其成员相同的名称，您可能会得到意外的效果。这就是为什么我将
kecamatan.filter（kecamatan=>
更改为
kecamatan.filter（result=>
）

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}
，然后将其正确分配给状态

}

将
const{results:kecamatan}
更改为
const{kecamatan}
，然后它将正确地将其分配给状态。
我发现筛选函数中存在两个问题：

您错误地从状态提取kecamatan，它应该是：

const { kecamatan } = this.state;

如果对数组和项使用相同的名称，则应在筛选器中使用不同的名称，如下所示：

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

我发现您的筛选函数中存在两个问题：

您错误地从状态提取kecamatan，它应该是：

const { kecamatan } = this.state;

如果对数组和项使用相同的名称，则应在筛选器中使用不同的名称，如下所示：

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

API响应中未定义结果

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

因此，当您执行
const{results:kecamatan}=json；
，
kecamatan
是未定义的，然后将其设置为state。因此，将其替换为
const{kecamatan}=json；
返回kecamatan.filter（kecamatan=>kecamatan.title.search（regex）>=0）；返回kecamatan.filter（kecamatan=>kecamatan.title.search（regex）>=0）；nice bro，但是在我替换它之后，我得到了一个错误VirtualizedList:itemnice bro缺少key，但是在我替换它之后，我得到了一个错误VirtualizedList:ItemUndefined不是一个对象（评估查询修剪）您正在对导致代码出现新问题的答案进行向下投票。这可能意味着这些答案修复了您发布的问题，并且您现在在代码的其他部分遇到了问题。OP没有对您进行向下投票，我是这样做的，因为在这种情况下，您的答案是不正确的，因为默认状态已经是空数组，所以没有必要保护筛选。再次查看fetch调用。OP将状态变量设置为结果中不存在的键，这将使筛选变量
未定义
@Abe准确无误，并且您的答案根本没有指向此问题。未定义不是对象（评估查询修剪）您正在对导致查询修剪的答案进行向下投票