Панель поиска в React Native не обновляется и не фильтруется - PullRequest
Новая
       79

Панель поиска в React Native не обновляется и не фильтруется

0 голосов
/ 12 марта 2020

Я пытаюсь настроить фильтрацию данных с помощью SearchBar по реагирующим элементам. Я возвращаю некоторые данные с сервера в формате JSON, поэтому они поступают в виде массива объектов.

Это то, что у меня есть: 

export default function AktList() {
  const [akt, setAkt] = useState([]);
  const [temp, setTemp] = useState([]);

  async function request() {
    fetch("http://192.168.5.12:5000/aktprikaz", {
      method: "get"
    })
      .then(res => res.json())
      .then(res => setAkt(res))
      .then(temp => setTemp(akt));
  }
  useEffect(() => {
    request();
  }, []);
  function Item({ title, selected }) {
    return (
      <TouchableOpacity
        onPress={() => console.log(temp)}
        style={[
          styles.item,
          { backgroundColor: selected ? "#6e3b6e" : "#f9c2ff" }
        ]}
      >
        <Text style={styles.title}>{title}</Text>
      </TouchableOpacity>
    );
  }
  function contains(text) {
    const newData = temp.filter(item => {
      const itemData = {title};

      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    setAkt(newData);
  }
  return (
    <SafeAreaView style={styles.container}>
      <Header />
      <SearchBar onChangeText={text => contains(text)} />
      <FlatList
        data={akt}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

В настоящее время текст не обновляется и ничего не фильтрует. Я пробовал следовать этому учебнику онлайн (хотя он написан с использованием классов, а не функций). Что я тут не так делаю?

1 Ответ

0 голосов
/ 13 марта 2020

Проверьте ниже пример, который я создал, используя flatlist и TextInput . Элементы отображаются в виде раскрывающегося списка при поиске элементов. Я думаю, что это поможет вам. 

import React, { Component } from 'react';
import { View, Text, FlatList, TextInput, ListItem } from 'react-native';

class FlatListDropDown extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      value: '',
    };

    this.arrayNew = [
      { name: 'Robert' },
      { name: 'Bryan' },
      { name: 'Vicente' },
      { name: 'Tristan' },
      { name: 'Marie' },
      { name: 'Onni' },
      { name: 'sophie' },
      { name: 'Brad' },
      { name: 'Samual' },
      { name: 'Omur' },
      { name: 'Ower' },
      { name: 'Awery' },
      { name: 'Ann' },
      { name: 'Jhone' },
      { name: 'z' },
      { name: 'bb' },
      { name: 'cc' },
      { name: 'd' },
      { name: 'e' },
      { name: 'f' },
      { name: 'g' },
      { name: 'h' },
      { name: 'i' },
      { name: 'j' },
      { name: 'k' },
      { name: 'l' },
    ];
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '100%',
          backgroundColor: '#CED0CE',
        }}
      />
    );
  };

  searchItems = text => {
    const newData = this.arrayNew.filter(item => {
      const itemData = `${item.name.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      data: newData,
      value: text,
    });
  };

  renderHeader = () => {
    return (
      <TextInput
        style={{ height: 60, borderColor: '#000', borderWidth: 1 }}
        placeholder="   Type Here...Key word"
        onChangeText={text => this.searchItems(text)}
        value={this.state.value}
      />
    );
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          padding: 25,
          width: '98%',
          alignSelf: 'center',
          justifyContent: 'center',
        }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <Text style={{ padding: 10 }}>{item.name} </Text>
          )}
          keyExtractor={item => item.name}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

export default FlatListDropDown;

Не стесняйтесь сомнений.

...