javascript - 在React中循环父对象内的对象

Question

我真的被这个问题困扰了，它看起来很简单，但我只是无法访问父对象的子对象，请有人帮忙。下图是控制台日志:

当我渲染它时，我看不到结果

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

当然，当我尝试this.state.list.map((item, index) => <p>{item}</p>);时我收到以下错误:

Objects are not valid as a React child

主要功能:

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
            });
        });
};

可以在此处找到实时 session (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>));