В этом массиве 11 объектов. так почему .map() возвращает 12?

ProgramBox

В этом массиве 11 объектов. так почему .map() возвращает 12?

Post author:admin
Запись опубликована:1 ноября, 2022
Post category:Вопросы по программированию

#javascript #reactjs #array.prototype.map

Вопрос:

У меня есть большой файл json, который возвращает большой массив приложений. есть 11 приложений. но когда я сопоставляю все и печатаю результаты, я получаю 11 приложений плюс пустой объект. сначала я пытался извлечь данные из объекта, расположенного в объекте, но я продолжал получать ошибки. Я предположил, что это потому, что я не хотел кодировать что-то вроде props.apps[0].customData, props.apps[1].customData, etc. .

но после дальнейшей проверки в консоли я обнаружил, что печатаю 11 приложений плюс 1 пустой объект. поскольку пустой объект не имеет никаких свойств, он выдает ошибку. Я не уверен, должен ли я использовать .map() или .filter() или что, но я полагаю, что первоочередной задачей является выяснить, почему список из 11 объектов возвращает 12 элементов. Я думаю, это может быть как-то связано с передачей приложений компоненту приложения с использованием реквизита.

когда я печатаю приложения изнутри MostPopularApps.js файл, в котором они сопоставлены, я получаю 11 объектов плюс сообщение об ошибке с надписью each child in a list should have a unique "key" prop . когда я печатаю на консоль из App.js компонент Я получаю 11 правильных объектов и 1 пустой. Теперь я думаю, что ошибка связана с несуществующим 12-м приложением и его несуществующим ключом. есть какие-нибудь идеи?

вот код, который отображает самые популярные приложения

 import React from 'react';
import App from './App';


const MostPopularApps = (props) => (
    <div>
        {console.log('printing inside most popular apps')}
        
        {Object.values(props.apps).map((app) => {
            console.log(app)
            // prints 11 times here
            // also throws an error that says each child needs its own unique key prop
            // so maybe there's 12 here
            return <App key={app.id} {...app} />
        })}
        <p>MOST POPULAR APPS</p>
        <App />
    </div>
)

export default MostPopularApps;
// also tried props.apps.map((app)

вот код для компонента приложения

 import React from 'react';
import { Link } from 'react-router-dom';
const App = (props) => {
    console.log(props)
    // prints 11 objects plus a 12th empty object
    return (
        <div>
            <Link to={`/details/:safeName`} className="featured-grid-item-badge">
                <div className="featured-grid-item">
                    <img className="featured-appIcon" />
                    <div>
                        <p className="featuredTitle">name</p>
                        <div>
                            <p className="featuredSummary">summary</p>
                        </div>
                    </div>
                </div>
            </Link>
        </div>
    )
}

export default App;

редактировать: как указал @blex, у меня было пустое <App /> поле под моим <p>MOST POPULAR APPS</p> тегом. забыл, что мне не нужно использовать это для рендеринга моих приложений. спасибо, что указали на очевидное!

1. консоль(Object.values(props.apps). длина) что дает?

2. Вам нужно удалить .filter пустой объект до .map или обработать пустой объект в .map , чтобы вернуть undefined, а затем отфильтровать его.

3. 11 объектов, которые вы хотите, и 1, который вам не нужен, — это все равно 12.

4. @crashmstr где же все-таки находится пустой объект? Я проверил звонок на postman, и он дает мне только 11 полных объектов. и {console.log(Object.values(props.apps).length)} возвращает 11

5. @mplungjan Я получаю 11, когда запускаю его в MostPopularApps.js

Ответ №1:

В массиве есть 12 элементов, по крайней мере, на скриншоте, который вы предоставили. Последний — это просто пустой объект без каких-либо свойств.

РЕДАКТИРОВАТЬ: В моем первоначальном сообщении говорилось, что пустой объект — это то же самое, что и неопределенный. Согласно приведенному ниже комментарию, это неправда. Однако это не меняет того, что у вас на самом деле есть 12 элементов в массиве.