Блог

Я совсем новичок в react native и пытаюсь настроить панель поиска с функцией поиска. Я пытаюсь настроить его так, чтобы список обновлялся с каждой введенной буквой. Данные отображаются нормально, но ошибка возникает, когда я пытаюсь ввести что-то в строку поиска.

Полное сообщение об ошибке

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, вы просто передаете новое значение

изменить

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

Для

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