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

如何解决使用 Hook 将搜索栏添加到平面列表中，未定义

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

对于平面列表，一切都相应地显示出来， 我无法过滤数据的问题， 我尝试使用原始完整数据（列表）中的 .filter，但结果始终未定义，不是数据。

顺便说一句，数据是从本地 .json 文件填充到使用 useEffect 状态的。

这里是当地的 country.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>
)

}

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

之前非常感谢

解决方法

问题是你的状态是一个 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'
  ]
}

List 是一个对象，您不能将过滤器与对象一起使用。 您可以像这样使用扩展运算符，而不是使用数组占位符，

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