Filtro de búsqueda de Reaccionar con los Nativos en FlatList

Me encontré con este mismo problema hoy en día cuando se trata de implementar un filtro /función de búsqueda en la nueva FlatList componente. Esto es cómo me las arreglé para resolver es:

Mediante la creación de otro elemento en el estado del componente padre se llama noData, se puede establecer que a la verdad cuando no hay resultados que coincidan con su búsqueda y, a continuación, hacer que su FlatList condicionalmente.

Mi aplicación es ligeramente diferente a la tuya, pero si he tenido que ajustar su código sería algo como esto:

Buscartexto función:

searchText = (e) => {
    let text = e.toLowerCase()
    let trucks = this.state.data
    let filteredName = trucks.filter((item) => {
      return item.name.toLowerCase().match(text)
    })
    if (!text || text === '') {
      this.setState({
        data: initial
      })
    } else if (!Array.isArray(filteredName) && !filteredName.length) {
      //set no data flag to true so as to render flatlist conditionally
      this.setState({
        noData: true
      })
    } else if (Array.isArray(filteredName)) {
      this.setState({
        noData: false,
        data: filteredName
      })
    }
  }

A continuación, pasar el noData bool a su TruckList componente:

<TruckList getTruck={(truck) => this.setTruck(truck)} 
truckScreen={this.truckScreen} data={this.state.data} noData={this.state.noData}/>

A continuación, hacer que su FlatList en el TruckList componente sólo si existen resultados:

<List style={styles.list}>
{this.props.noData ? <Text>NoData</Text> : <FlatList {...} />}         
</List>

Que luego debe encargarse de la gestión del usuario, errores de escritura – que se va a volver a renderizar el flatlist tan pronto como no hay ningún resultado, y recordará el anterior estado de la búsqueda cuando se quita el error de mecanografía..

Hágamelo saber si eso ayuda!

Actualización:
Este blog puede ayudar a comprender mejor la búsqueda en un FlatList.

FYI:
Si usted tiene enorme de datos en línea, a continuación, también puede utilizar algolia.

He ajustado el código de arriba para mí con el fin de que funcione correctamente. La razón es que cuando el usuario elimina el último carácter equivocado, la búsqueda de código de esta nueva cadena a partir de una búsqueda anterior lista (estado) que no contiene todos los objetos, aunque tuviera que buscar en una lista completa disponible. Así que, yo tengo dos de la lista ahora. Uno contiene la lista completa de los objetos y la segunda contiene solo se representan en la lista de objetos que está cambiando en la búsqueda.

handleSearchInput(e){
    let text = e.toLowerCase()
    let fullList = this.state.fullListData;
    let filteredList = fullList.filter((item) => { //search from a full list, and not from a previous search results list
      if(item.guest.fullname.toLowerCase().match(text))
        return item;
    })
    if (!text || text === '') {
      this.setState({
        renderedListData: fullList,
        noData:false,
      })
    } else if (!filteredList.length) {
     //set no data flag to true so as to render flatlist conditionally
       this.setState({
         noData: true
       })
    }
    else if (Array.isArray(filteredList)) {
      this.setState({
        noData: false,
        renderedListData: filteredList
      })
    }
  }

Para una útil en la memoria de la búsqueda que usted debería mantener datos iniciales por separado.

Tengo más solución simple para esto.

Esta solución en la memoria de la búsqueda en FlatList de datos y utiliza la Cadena.el prototipo.incluye (a) el método para la búsqueda de subcadenas.

Usted puede encontrar el código fuente completo de este componente en este gist;
https://gist.github.com/metehansenol/46d065b132dd8916159910d5e9586058

Mi estado inicial;

this.state = {
  searchText: "",
  data: [],
  filteredData: []
};

Mi barra de búsquedas componente (viene de reaccionar-nativo-elementos del paquete);

<SearchBar
  round={true}
  lightTheme={true}
  placeholder="Search..."
  autoCapitalize='none'
  autoCorrect={false}
  onChangeText={this.search}
  value={this.state.searchText}
/>

Mi método de búsqueda;

search = (searchText) => {
  this.setState({searchText: searchText});

  let filteredData = this.state.data.filter(function (item) {
    return item.description.includes(searchText);
  });

  this.setState({filteredData: filteredData});
};

Y último de mi FlatList del origen de datos de expresión;

<FlatList
  data={this.state.filteredData && this.state.filteredData.length > 0 ? this.state.filteredData : this.state.data}
  keyExtractor={(item) => `item-${item.id}`}
  renderItem={({item}) => <ListItem
    id={item.id}
    code={item.code}
    description={item.description}
  />}
/>

Feliz codificación…

Aquí está mi solución:

Usted necesita tener una copia de seguridad de sus datos

this.state = {
    data: [],
    backup: []
}

sobre el método de búsqueda

search = txt => {
    let text = txt.toLowerCase()
    let tracks = this.state.backup
    let filterTracks = tracks.filter(item => {
    if(item.name.toLowerCase().match(text)) {
      return item
    }
  })
  this.setState({ data: filterTracks })
}

Explicación: cuando se llama a setState de los datos que se le ha cambiado el estado actual y no puede ser cambiado de nuevo.

Modo de copia de seguridad de datos de la manija para filtrar los datos.

ref – https://medium.freecodecamp.org/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699

constructor(props) {
super(props);
this.state = {
  data: [],
  value: ""
};

this.arrayholder = [];
}

Siguiente obtención de datos :-

_fetchdata = async () => {
const response = await fetch("https://randomuser.me/api?results=10");
const json = await response.json();
this.setState({ data: json.results });

this.arrayholder = json.results;
};

Próximo definir searchFilterFunction :-

searchFilterFunction = text => {
this.setState({
  value: text
});


const newData = this.arrayholder.filter(item => {
  const itemData = item.email.toLowerCase();

  const textData = text.toLowerCase();

  return itemData.indexOf(textData) > -1;
});

this.setState({ data: newData });
};

representación searchView:-

    <TextInput
      style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
      onChangeText={text => this.searchFilterFunction(text)}
    />

No te olvides de importación TextInput de «reaccionar-nativo»;

FYI : data es el subtext a ser buscado, esto es una búsqueda básica implementado como los datos a ser registrados se veía en cada elemento de la lista de una matriz que es una copia de la real array/array de objects y, finalmente, su estado es establecer si se encuentra coincidencia o no entre 0 a (actualArray.length-1) y el temporal arrayData se representa si hay al menos un partido más actualArray se representa

JS:

implementSearch(data) {
    temp = [];
    var count = 0;
    var searchData = data.toUpperCase();
    var arr = this.state.personDetail;
    for (var i = 0; i < arr.length; i++) {
      var actualData = arr[i].name.toUpperCase();
      if (actualData.includes(searchData)) {
        temp.push(arr[i]);
        count++;
      }
    }
    this.setState({
      tempArray: temp,
      matches: count,
      searchValue: data
    });
  }

Esperanza esto ayuda a

Mi método de búsqueda; de @metehan-senol

search = (searchText) => {
  this.setState({searchText: searchText});

  let filteredData = this.state.data.filter(function (item) {
    return item.description.includes(searchText);
  });

  this.setState({filteredData: filteredData});
};

el método de búsqueda de la se podría simplificar y Eslint prueba como

search = (searchText) => {
  const searched = searchText.toLowerCase();
  this.setState(prevState => ({
    searchText: searched,
    filteredData: prevState.data.filter(item =>
      item.description.toLowerCase().includes(searched)
    ),
  }));
};