Arhn - архитектура программирования

Добавление панели поиска в Flatlist с помощью Hook, Undefined

я пытаюсь создать плоский список внутри модального окна с функциональностью панели поиска, которая может фильтровать результат на основе ввода пользователя в строке поиска.

Для плоского списка все отображается соответственно, проблема: я не могу фильтровать данные, я пытаюсь использовать .filter из исходных полных данных (списка), но результат всегда не определен, это не данные.

Кстати, данные заполняются из локального файла .json для состояния с использованием useEffect.

Вот локальные данные country.json:

[
"Japan", 
"Korea", 
"Thailand", 
"Indonesia" ]

Вот часть исходного кода:

import dataCountry from '../../assets/json/country.json';

const NameScreen = ({навигация}) => {

// hook
const [list, setList] = useState([]);
const [modalBirthplace, setModalBirthplace] = useState(false);
const [searchText, setSearchText] = useState('');

useEffect(() => {
    setList({ dataCountry });
    console.log('check List : ', list);
}, [])

const renderItem = ({ item }) => (
    <Item title={item.title} />
);

const ListItem = ({ title }) => (
    <View>
        <TouchableOpacity onPress={() => console.log("ok")}>
            <Text style={styles.cityList}>{title}</Text>
        </TouchableOpacity>
    </View>
);

const searchFilterFunction = searchText => {

    setSearchText(searchText);
    console.log(searchText)

    const newData = list.filter((item) => { // error trigger from this list.filter undefined is not a function
        const itemData = item.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });

    setList(newData);
};

return (
    <View style={styles.container}>
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalBirthplace}
            onRequestClose={() => {
                Alert.alert('Modal has been closed.');
            }}>
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text style={styles.modalText}>Choose your country location :</Text>
                    <TextInput
                        placeholder="Try japan maybe?"
                        onChangeText={searchText => searchFilterFunction(searchText)}
                        value={searchText}
                    />
                    <FlatList
                        data={list.dataCountry}
                        renderItem={({ item }) => (
                            <ListItem
                                title={item}
                            />
                        )}
                        keyExtractor={item => item}
                    />
                    <TouchableHighlight
                        style={{ ...styles.openButton, backgroundColor: '#E15C72' }}
                        onPress={() => {
                            setModalBirthplace(!modalBirthplace);
                        }}>
                        <Text style={styles.textStyle}>Close Selection</Text>
                    </TouchableHighlight>
                </View>
            </View>
        </Modal>
    </View>
)

}

Кто-нибудь знает, почему я не могу фильтровать состояние?

Большое спасибо перед

react-native react-hooks react-native-flatlist hook searchbar
15.03.2021

  • это ошибка, которая возникает, когда вы вводите что-то в строке поиска? 15.03.2021
  • да, когда я набираю строку поиска, возникает ошибка, я подозреваю, что она находится в list.filter, я проверяю ее, используя пустой массив, скажем, у меня есть const [arrayholder, setArrayholder] = useState (''); и я поставил arrayholder.filter, тогда нет ошибки. но с этим списком, который содержит мои полные данные, он всегда не определен, и мне пора что-то набирать в строке поиска. 15.03.2021

Ответы:


1

проблема в том, что ваше состояние является объектом JSON, а не массивом:

setList({ dataCountry });
// so list is: 
{
  dataCountry: [
    ...
  ]
}

так что вам нужно изменить здесь

const newData = list.dataCountry.filter((item) => { // here
        const itemData = item.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });

    setList({dataCountry: newData}); // and here
15.03.2021
  • Привет, я вижу, я пытаюсь зарегистрировать это, и да, это состояние содержит объект, а внутри него массив. Спасибо. Кстати, я пробовал, и он может фильтровать, каждый раз, когда я набираю символ, он уже фильтрует результат сейчас, но если я удалю символ (возврат), почему результат фильтра не обновляется? 15.03.2021
  • @abet, потому что исходный массив изменился. но это другая проблема, поэтому я думаю, что вам нужно решить ее самостоятельно 15.03.2021
  • Принято к сведению! я управляю этим, создавая другое состояние, чтобы сохранить исходный массив, поэтому каждый раз, когда вызывается функция поиска, я не обновляю исходный массив. Я не знаю, хорошая это практика или нет, но это работа. Еще раз спасибо @Quang Thai 15.03.2021

    • 2

    может быть, ваш json такой,

     const list = {
  dataCountry : [
    'UK',
    'US'
  ]
}

    Список — это объект, вы не можете использовать фильтр с объектом. Вместо использования заполнителя массива вы можете использовать такой оператор распространения:

    const newData = [...list.dataCountry].filter((item) => { 
  const itemData = item.toUpperCase();
  const textData = searchText.toUpperCase();
  return itemData.indexOf(textData) > -1;
});
    15.03.2021
  • Принял к сведению спасибо за объяснение 15.03.2021
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..