Question

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

完整的错误信息

这是有问题的文件

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 那样传递状态对象，您只需传递新值

改变

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

到

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

类型错误：未定义不是函数（靠近“...currencyFilter.map...”）

1 个答案: