Блог

Главная - Вопросы по программированию - Почему я получил: Ошибка типа: Не удается прочитать свойство «В нижнем регистре» неопределенного (React JS)

Почему я получил: Ошибка типа: Не удается прочитать свойство «В нижнем регистре» неопределенного (React JS)

#javascript #reactjs

Вопрос:

Новичок здесь, я пытаюсь создать фильтр поиска, и я не уверен, почему я получаю эту ошибку:

Ошибка типа: Не удается прочитать свойство «В нижнем регистре» неопределенного

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

Я перепробовал все в ответе ниже

 let mangas = [
    {
        id: '4',
        name: 'Some Manga',
        author: 'Some Name',
        artist: 'Some Name',
        chapters: 'Some Number',
    }, 
 
 function Search() {
    const [search, setSearch] = useState('');
    return (
        <div>
            <Navbar1 />
            <NavbarExplore />
            <section className="bg-light" style={{ minHeight: 700 }}>
                <div className="container">
                    <div className="column pb-5 mb-5" style={{ minHeight: 800 }}>
                        <h1
                            className="top-header pt-5 mb-5"
                            style={{ borderBottom: '1px black solid', width: 400 }}
                        >
                            Full List
                        </h1>{' '}
                        <div className="nav-item px-2 mr-4 mb-4">
                            <form className="form-inline" action="/action_page.php">
                                <input
                                    type="search"
                                    placeholder="Search.."
                                    className="mr-sm-2 pl-3 my-2 ml-3 search3"
                                    onChange={(e) => {
                                        setSearch(e.target.value);
                                    }}
                                />
                            </form>
                        </div>
                        <div className="row" style={{ listStyleType: 'none' }}>
                            {Object.keys(mangas)
                                .filter((val) => {
                                    if (search === '') {
                                        return val;
                                    } else if (
                                        val.name.toLowerCase().includes(search.toLowerCase())
                                    ) {
                                        return val;
                                    } else {
                                        return 'null';
                                    }
                                })
                                .map((key) => (
                                    <li key={key}>
                                        <div className="card m-2 mb-3 p-2 listbox">
                                            <div className="column">
                                                <div className="col-sm mb-2" style={{ color: 'black' }}>
                                                    <h3>{mangas[key].name}</h3>

Комментарии:

1. По крайней мере, один из search них или val.name есть undefined . Вам нужно отладить, какой именно, и выяснить, почему.

2. Подождите, у вас есть Object.keys(mangas) filter((val) => { /* ... */}) , это означает val , что может быть только строка. Ты это имел в виду Object.values(mangas) ? Или, может mangas[key].name.toLowerCase().includes(search.toLowerCase()) быть ?

3. Object.values не работает, потому что я ищу значение внутри ключа, я также пробовал mangas[ключ].name раньше, это устраняло ошибку, но в результате функция сортировки не работала. Я ценю ваши попытки!

4. Если вам нужны только значения массива, то mangas.filter() ? Я действительно не уверен, что здесь должно происходить.

5. Я хочу, чтобы это был фильтр поиска, пользователь вводит слова/буквы и отфильтровывает все, что не входит в то, что вводит пользователь. Входные данные должны принимать атрибут » имя » из массива, чтобы найти его. Также вы правы, val.name вероятно, в этом и есть проблема, просто не знаю, как ее исправить. То, что я пробовал, это mangas.keys.name, манги[ключи].имя, mangas.name, val.keys.name, и т. д

Ответ №1:

попробуйте использовать

   Object.values(mangas).filter((val) => {

                                if (search === '') {
                                    return val;
                                } else if (                                    
    val?.name.toLowerCase().includes(search.toLowerCase())
                                ) {
                                    return val;
                                } else {
                                    return 'null';
                                }
});

Комментарии:

1. Попробуйте использовать Object.values вместо Object.keys

2. Он не может найти атрибут «имя»

3. Он вернет объект

4. Даже вам не нужно использовать Object.keys и Object.values одновременно . Вы можете просто написать mangas.filter .

5. Я немного сбит с толку, не могли бы вы объяснить немного подробнее

Метки: