繁体   English   中英

TypeError: undefined is not a function(靠近'...currencyFilter.map...')

[英]TypeError: undefined is not a function (near '…currencyFilter.map…')

我对本机反应并尝试设置具有搜索功能的搜索栏很陌生。 我正在尝试将其设置在列表随键入的每个字母而更新的位置。 数据显示正常,但当我尝试在搜索栏中输入内容时出现错误。

完整的错误信息

https://ibb.co/Zd5hB52

这是有问题的文件

import { StyleSheet, Text, View, Button, StatusBar, ScrollView, TextInput } from "react-native";
import Icon from 'react-native-vector-icons/Ionicons';
import datas from "../components/CurrencyData"
import FavouritesList from "../components/FavouritesList";

const AddToFavourites = () => {

    const state = {
        datas: datas,
        filter: datas
    }

    const [currencyFilter, setSearch] = useState(state.filter)

    const getFlags = () => {
        return currencyFilter.map(data => {
            return <FavouritesList detail={data} key={data.id}/>
        })
    }

    const searchCurrencies = (searchFor) => {
        setSearch({
            filterCurrency: datas.filter(i=>
                i.name.toLowerCase().includes(searchFor.toLowerCase),
            ), 
        });
    }
    
    return (
        <View style={styles.container}>
            <View style= {styles.action}>
                <Icon name="search" size={25}/>

                <TextInput
                    style= {{flex: 1}}
                    placeholder= "Search..."
                    underlineColorAndroid="transparent"
                    onChangeText= {text => {searchCurrencies(text)}}
                />
            </View>

            <ScrollView>
                <StatusBar backgroundColor="#1E90FF" barStyle="light-content"/>
                {getFlags()}
            </ScrollView>
        </View>
        )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    action: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 2,
        height: 50,
        borderRadius: 30,
        paddingLeft: "4%",
        paddingRight: "4%",
        margin: "3%"
      },
})

export default AddToFavourites;```


  [1]: https://i.stack.imgur.com/kWkHo.png

使用钩子,您不会像 setState 一样传递 state object,您只需传递新值

改变

setSearch({
  filterCurrency: datas.filter(i => i.name.toLowerCase().includes(searchFor.toLowerCase)),
});

setSearch( datas.filter(I =>i.name.toLowerCase().includes(searchFor.toLowerCase)));

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM