使用 Hook，Undefined 将搜索栏添加到 Flatlist

Question

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

对于平面列表，所有内容都会相应显示，问题我无法过滤数据，我尝试使用原始完整数据（列表）中的 .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>
)

}

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

之前非常感谢

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

使用 Hook，Undefined 将搜索栏添加到 Flatlist

Adding Search Bar into Flatlist using Hook, Undefined

hook

searchbar

react-native

react-native-flatlist

react-hooks