TypeError: undefined is not a function（靠近'...currencyFilter.map...'）

Question

我對本機反應並嘗試設置具有搜索功能的搜索欄很陌生。 我正在嘗試將其設置在列表隨鍵入的每個字母而更新的位置。 數據顯示正常，但當我嘗試在搜索欄中輸入內容時出現錯誤。

完整的錯誤信息

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

Answer 1

使用鈎子，您不會像 setState 一樣傳遞 state object，您只需傳遞新值

改變

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

至

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