筛选器搜索神奇宝贝名称不起作用

时间:2019-12-06 10:31:16

标签: react-native filter

在搜索栏中写任何内容说:

  

未定义不是对象。 this.state.text

代码:

class Pokemon extends Component {
    constructor(props){
        super(props)
        this.state={list:null,output:null,text:""}
    }
    componentDidMount() {
        return fetch("https://pokeapi.co/api/v2/pokemon/?offset=0&limit=1500").then((response)=>response.json()).then((responseJson)=>this.setState({list:responseJson.results,output:responseJson.results}))
    }
    search(word){
        var t=""
        for(let i=0;i<this.state.text.length;i++){
            t=t+word[i]
        }
        return this.state.text==t
    }
    render(){
        if(this.state.output===null){
            return(<View style=={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:this.props.bgc}}>
    <Text style={{fontSize:70,color:this.props.color}}>LOADING</Text>
    </View>)
        }
        return(
            <View style={{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:this.props.bgc}}>
                <Text style={{color:this.props.color,textAlign:"center",fontSize:30}}>POKEMON</Text>
                <TextInput autoCapitalize="none" placeholder="Search" placeholderTextColor={this.props.color} style={{backgroundColor:this.props.bgc}} value={this.state.text} onChangeText={text=>{this.setState({text})
                    this.setState({output:this.state.list.filter(this.search)})}}/>
                <FlatList data={this.state.output} renderItem={item=><TouchableOpacity onPress={this.props.navigation.navigate("PokemonDetails",{url:item.url})}><Text style={{color:this.props.color}}>{item.name}</Text></TouchableOpacity>}/>
           </View>
        )
    }
}

0 个答案:

没有答案