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

Question

我尝试在带有搜索栏功能的模态内部创建平面列表，该功能可以根据用户在搜索栏中的输入过滤结果。

对于平淡主义者来说，一切都会相应地出现，问题是我无法过滤数据，我尝试使用.filter从原始的完整数据(列表(，但结果总是未定义的不是一个数据。

Btw数据使用useEffect从local.json文件填充到状态。

这是当地国家的.json数据：

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

以下是部分源代码：

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

const NameScreen=(｛navigation｝(=>｛

// hook
const [list, setList] = useState([]);
const [modalBirthplace, setModalBirthplace] = useState(false);
const [searchText, setSearchText] = useState('');
useEffect(() => {
setList({ dataCountry });
console.log('check List : ', list);
}, [])
const renderItem = ({ item }) => (
<Item title={item.title} />
);
const ListItem = ({ title }) => (
<View>
<TouchableOpacity onPress={() => console.log("ok")}>
<Text style={styles.cityList}>{title}</Text>
</TouchableOpacity>
</View>
);
const searchFilterFunction = searchText => {
setSearchText(searchText);
console.log(searchText)
const newData = list.filter((item) => { // error trigger from this list.filter undefined is not a function
const itemData = item.toUpperCase();
const textData = searchText.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setList(newData);
};
return (
<View style={styles.container}>
<Modal
animationType="slide"
transparent={true}
visible={modalBirthplace}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Choose your country location :</Text>
<TextInput
placeholder="Try japan maybe?"
onChangeText={searchText => searchFilterFunction(searchText)}
value={searchText}
/>
<FlatList
data={list.dataCountry}
renderItem={({ item }) => (
<ListItem
title={item}
/>
)}
keyExtractor={item => item}
/>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: '#E15C72' }}
onPress={() => {
setModalBirthplace(!modalBirthplace);
}}>
<Text style={styles.textStyle}>Close Selection</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
)

}

有人知道我为什么不能过滤状态吗？

在之前非常感谢

Answer 1

问题是您的状态是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

Answer 2

也许你的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;
});