Как отфильтровать покемонов в реакции родных

Question

Я пытаюсь отфильтровать покемонов в моем компоненте панели поиска, однако, когда я набираю в строке поиска имя компонента, со списком ничего не происходит. Я искал в Интернете решения, но другие примеры слишком сложны для реализации в моем коде. Я consoling.log ввода от компонента панели поиска, и он записывает ввод текста. Но просто не знаю, как отфильтровать покемонов. Если кто-нибудь может мне помочь, я буду очень признателен!

// Home.js(Where pokemon ifo is coming from in the componentDidiMount abd then I pass down a function to the searchbar component)

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
import SearchBarComponent from "../components/SearchBar";
import PokeBanner from "../components/PokeBanner";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
            filteredPokemon:[]
        }
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response.results,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    }

    filterPokemon =(textToSearch)=> {
        const allPokemon = [...this.state.dataSource];
        this.setState({
            dataSource: allPokemon.filter(pokemon=> pokemon.name.toLowerCase().includes(textToSearch.toLowerCase()))
        });

        console.log("TextToSearch",textToSearch)
    }

    render() {

        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={GlobalStyles.container}>
                <SearchBarComponent filterPoke={this.filteredPokemon} style={GlobalStyles.searchBar}/>
                <PokeBanner/>
                <View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
                <View style={GlobalStyles.pokeFlatList}>
                <FlatList
                    contentContainerStyle={{paddingBottom: 70}}
                    keyExtractor={(item, index) => item.name}
                    numColumns={3}
                    data={this.state.dataSource} 
                    renderItem={({item})=> 
                    <View style={{flex: 1,justifyContent:"center", alignItems:"center", flexDirection: "row", marginBottom: 50, padding: 10}}>
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails', 
                    {item ,imageUrl: `https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
                        <PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
                    </TouchableOpacity>
                    </View>
                    }/>
                </View>
            </View>
        )
    }
}


export default Home;





// SearchBarComponent(Where I take the function passed down as a prop and use it in the updateSearch method)

import React from "react";
import {View, StyleSheet } from "react-native";
import { SearchBar } from 'react-native-elements';
import { GlobalStyles } from "../styles/GlobalStyles";


class SearchBarComponent extends React.Component {
  state = {
    search: '',
  };

updateSearch=()=> {
  this.props.pokeFilter(this.state.search);
  console.log(this.state.search)
}



  render() {
    const { search } = this.state;
    console.log(search)
    return (
        <View style={GlobalStyles.searchBar}>
            <SearchBar
                placeholder="Search pokemon..."
                onChangeText={text=>this.setState({search: text})} 
                value={search}
            />
        </View>

    );
  }
}


export default SearchBarComponent;




[![enter image description here][1]][1]

Answer 1

Вам нужно вызвать вашу updateSearch функцию, когда пользователь хочет найти покемона.

Есть несколько способов сделать это, например, вы можете сохранить отдельную кнопку для обработки функции отправки или вызова updateSearch внутри onChangeText компонента панели поиска, как показано ниже,

<SearchBar
    placeholder="Search pokemon..."
    onChangeText={this.updateSearch}
    value={search}
/>

теперь измените updateSearch для обработки текста поиска

updateSearch = (text) => {
  this.setState({ search: text });
  this.props.pokeFilter(this.state.search);
}

Также измените реквизиты SearchBarComponent компонент как (, убедитесь, что вы используете правильное имя )

<SearchBarComponent pokeFilter={this.filterPokemon} style={GlobalStyles.searchBar}/>

Но вы должны сохранить временную переменную для хранения всех ваших покемонов. Потому что вам нужно отфильтровать данные от всех покемонов, когда пользователь переделал поле поиска.

componentDidMount() {
    fetch(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
        .then((res) => res.json())
        .then((response) => {
            this.setState({
                isLoading: false,
                // keep a temp to store all pokemons
                pokemons: response.results,
                dataSource: response.results,
            });
        });
}

Теперь вы можете использовать функцию фильтра

filterPokemon = (textToSearch) => {
    // load all pokemons from temp
    const allPokemon = [...this.state.pokemons];
    this.setState({
        dataSource: allPokemon.filter(pokemon => pokemon.name.toLowerCase().includes(textToSearch.toLowerCase()))
    });
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

Answer 2

Вы должны установить FilteredPokemon как всех покемонов, когда вы делаете первую петицию и передаете это состояние в FlatList. Таким образом, вы будете показывать только отфильтрованного покемона: затем, когда вы измените поиск, вы просто отфильтруете состояние allPokemon и установите его на отфильтрованное. Позвольте мне показать это:

componentDidMount() {
    fetch(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
        .then((res)=> res.json())
        .then((response)=> {
            this.setState({
                isLoading: false,
                dataSource: response.results,
                filteredPokemon: response.results,
            })
            console.log("RESPONSE",response)
            console.log("RESPONSE.RESSSULTS",response.results)
        })

}

filterPokemon =(textToSearch)=> {
    const allPokemon = [...this.state.dataSource];
    const filteredPokemon = allPokemon.filter((pokemon) => 
        pokemon.name.toLowerCase().includes(textToSearch.toLowerCase()))
    this.setState({
       filteredPokemon 
    });

    console.log("TextToSearch",textToSearch)
}

Любая проблема, просто дайте мне знать, и я буду рад помочь!