React native 使用钩子将搜索栏添加到平面列表中，未定义

我尝试使用搜索栏功能在modal内部创建flatlist，该功能可以根据用户在搜索栏中的输入过滤结果

对于平面列表，所有内容都会相应显示， 问题是我无法过滤数据， 我尝试使用原始完整数据（列表）中的.filter，但结果始终是未定义的，而不是数据

Btw数据使用useffect从local.json文件填充到state

以下是local country.json数据：

[
"Japan", 
"Korea", 
"Thailand", 
"Indonesia" ]

以下是部分源代码：

import dataCountry from '../../assets/json/country.json';

常量名称屏幕=（{navigation}）=>{

//钩子
const[list，setList]=useState（[]）；
const[modalBirthplace，setModalBirthplace]=useState（false）；
常量[searchText，setSearchText]=useState（“”）；
useffect（（）=>{
集合列表（{dataCountry}）；
日志（'检查列表'，列表）；
}, [])
常量renderItem=（{item}）=>(
);
常量ListItem=（{title}）=>(
console.log（“确定”）}>
{title}
);
const searchFilterFunction=searchText=>{
setSearchText（搜索文本）；
console.log（searchText）
const newData=list.filter（（项）=>{//此列表中的错误触发器。未定义的筛选器不是函数
const itemData=item.toUpperCase（）；
const textData=searchText.toUpperCase（）；
返回itemData.indexOf（textData）>-1；
});
设置列表（新数据）；
};
返回(
{
警报。警报（'模式已关闭'）；
}}>
选择您所在的国家/地区：
searchFilterFunction（searchText）}
值={searchText}
/>
(
)}
keyExtractor={item=>item}
/>
{
setModalBirthplace（！modalBirthplace）；
}}>
近距离选择
)

}

有人知道我为什么不能过滤这个州吗

---

在此之前非常感谢。问题是您的状态是JSON对象，而不是数组：

setList({ dataCountry });
// so list is: 
{
  dataCountry: [
    ...
  ]
}

所以，你需要在这里换车

const newData = list.dataCountry.filter((item) => { // here
        const itemData = item.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });

    setList({dataCountry: newData}); // and here

---

问题是您的状态是JSON对象，而不是数组：

setList({ dataCountry });
// so list is: 
{
  dataCountry: [
    ...
  ]
}

所以，你需要在这里换车

const newData = list.dataCountry.filter((item) => { // here
        const itemData = item.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });

    setList({dataCountry: newData}); // and here

---

也许你的json是这样的

 const list = {
  dataCountry : [
    'UK',
    'US'
  ]
}

const newData = [...list.dataCountry].filter((item) => { 
  const itemData = item.toUpperCase();
  const textData = searchText.toUpperCase();
  return itemData.indexOf(textData) > -1;
});

列表是一个对象，不能将筛选器用于对象。 不使用数组占位符，您可以像这样使用排列运算符

 const list = {
  dataCountry : [
    'UK',
    'US'
  ]
}

const newData = [...list.dataCountry].filter((item) => { 
  const itemData = item.toUpperCase();
  const textData = searchText.toUpperCase();
  return itemData.indexOf(textData) > -1;
});

---

也许你的json是这样的

 const list = {
  dataCountry : [
    'UK',
    'US'
  ]
}

const newData = [...list.dataCountry].filter((item) => { 
  const itemData = item.toUpperCase();
  const textData = searchText.toUpperCase();
  return itemData.indexOf(textData) > -1;
});

列表是一个对象，不能将筛选器用于对象。 不使用数组占位符，您可以像这样使用排列运算符

 const list = {
  dataCountry : [
    'UK',
    'US'
  ]
}

const newData = [...list.dataCountry].filter((item) => { 
  const itemData = item.toUpperCase();
  const textData = searchText.toUpperCase();
  return itemData.indexOf(textData) > -1;
});

---

是在搜索栏中键入内容时发生的错误吗？是的，当我在搜索栏中键入内容时，我怀疑错误出现在列表中。filter，我正在使用空数组测试它，假设我的const[arrayholder，setArrayholder]=useState（“”）；我把arrayholder.filter放进去，然后就没有错误了。但对于包含完整数据的列表，它总是未定义的，是时候在搜索栏中键入内容了。在搜索栏中键入内容时是否会发生错误？是的，当我在搜索栏中键入内容时，可能会发生错误。过滤器，我正在使用空数组对其进行测试，假设我有const[arrayholder，setArrayholder]=使用状态（“”）；我把arrayholder.filter放进去，然后就没有错误了。但是对于这个包含我全部数据的列表，它总是未定义的。是时候在搜索栏中键入一些东西了。您好，我看到了，我尝试记录它，是的，它的状态包含对象，并且在其中包含一个数组。非常感谢。顺便说一句，我试过了，它可以过滤，每次我输入字符，它现在已经在过滤结果了，但是如果我删除字符（退格），为什么过滤结果不刷新？@abet，因为原始数组已更改。但这是另一个问题，所以我认为你需要自己解决它！我通过创建其他状态来管理它，以保持原始数组，因此每次调用搜索函数时，我都不会更新原始数组。我不知道这是不是一个好的做法，但这是工作。再次感谢@Quang TháiHi我明白了，我尝试记录它，是的，它的状态包含对象，并且在其中包含一个数组。非常感谢。顺便说一句，我试过了，它可以过滤，每次我输入字符，它现在已经在过滤结果了，但是如果我删除字符（退格），为什么过滤结果不刷新？@abet，因为原始数组已更改。但这是另一个问题，所以我认为你需要自己解决它！我通过创建其他状态来管理它，以保持原始数组，因此每次调用搜索函数时，我都不会更新原始数组。我不知道这是不是一个好的做法，但这是工作。再次感谢您@Quang TháiNoted感谢您的解释