Почему не могу перебрать массив через map. TypeError: test.map is not a function?

Question

[Max]

Я получаю данные из firebase через axios и хочу их отрендерить

Данные приходят в функцию рендер в виде массива объектов
Вот я вывел их в консоль:


После переборки выбивает ошибку TypeError: test.map is not a function

render() {  
        const test = this.props.users;
        console.log('test', test);

        return (
            <div>
                 {
                    test.map(u => { 
                    return <div key={u.id}>
                             <div>{u.fullName}</div>
                           </div>
                        })
                }
            </div>
        )
    }

Если те же данные вывести из компонента, все работает

render() {
        const dataFromComponent = [  
                {id: 1, fullName: 'Max' },
                {id: 2,  fullName: 'Jordan' },
                {id: 3,  fullName: 'Gary' },
                {id: 4,  fullName: 'Oleg' } 
                ]

        return (
            <div>
                 {
                    dataFromComponent.map(u => { 
                    return <div key={u.id}>
                             <div>{u.fullName}</div>
                           </div>
                        })
                }
            </div>
        )
    }

При выводе:

if (!test.map ) {
            console.log("props", {...this.props})
        }

в консоль падает:

Answer 1

[Владимир]

Ты уверен что на каком то этапе жизненного цикла у тебя test не undefined?
https://reactjs.org/docs/state-and-lifecycle.html
https://reactjs.org/docs/conditional-rendering.html

Comments

[ReactLover]

Судя по ошибке, test точно не undefined, но и не массив. Скорее всего автор инициализирует переменную пустой строкой, а не пустым массивом.

[Max]

ReactLover, Массив изначально приходят с сервера обернутый в двойные кавычки. Но когда я дание забираю из State, массив без кавычек. (Я вводил его в консоль как на первом фото)

[ReactLover]

Max Duma, На скрине как я понимаю у тебя не массив, а JSON (строка). Ты ответ сервера парсишь вообще?

[Max]

ReactLover, Нет, я использую axios, как я понимаю. Он парсит по-умолчанию сам.
https://stackoverflow.com/questions/48062821/axios...

[Владимир]

Max Duma,
В том месте, где у тебя console.log напиши
if (!test ) console.log("props", {...this.props})

[Max]

Владимир, test приходит, в консоль ничего не падает

[Владимир]

Max Duma,
if (!test.map ) console.log("props", {...this.props})

[Max]

Владимир, В консоль вывело:



Массив обернутый в двойные кавычки

[ReactLover]

Max Duma, Я же тебе изначально ответил что там строка, в этом твоя проблема. Но это не валидный JSON

[Max]

ReactLover, Да, спасибо, у меня все получилось. Проблема заключалась в невалидном JSON

[ReactLover]

Max Duma, Не за что