Зацикливание объектов внутри родительского объекта в React

Question

Я действительно застрял в этой проблеме, она выглядит очень просто, но я просто не могу получить доступ к потомкам родительского объекта, пожалуйста, кто-нибудь поможет.На рисунке ниже показан журнал консоли:

Когда я это отображаю, я не вижу результатов

const listItems = this.state.list.map((item, index) => <p>{item.title}</p>);

OfКонечно, когда я пытаюсь this.state.list.map((item, index) => <p>{item}</p>); я получил ошибку ниже:

Объекты недопустимы как дочерний элемент React

Основная функция:

componentDidMount = () => {
    fire
        .database()
        .ref(`/feed/`)
        .on('value', snapshot => {
            var obj = snapshot.val();
            var list = [];
            for (let a in obj) {
                list.push(obj[a]);
            }
            console.log(list);
            this.setState({
                list: list,
                loading: false
            });
        });
};

Сессию в реальном времени можно найти здесь (Home.js) https://codesandbox.io/live/DR7WzY

РЕДАКТИРОВАТЬ: моя последняя попытка

        for (let a in obj) {
            for (let b in obj[a]) {
                console.log(b);
            }
        }

Но она пуста !!

Answer 1

item.title работает, потому что это строка.Вы не можете передать объект, если вы хотите просмотреть объект, вы можете просто привести его в строку:

this.state.list.map((item, index) => <p>{JSON.stringify(item)}</p>);

Поскольку у вас есть вложенные объекты, вам нужно будет сделать что-то вроде:

this.state.list.map((item, index) =>
  Object.values(item).map(nestedItem => 
    <p>{JSON.stringify(nestedItem)}</p>));