Question

我有子对象数组，我想在模板中渲染它，但是会产生错误。

class App extends React.Component {
    constructor(props) {
        this.state = {
            data : {
                first:[
                    'name1',
                    'name2'
                ],
                second:[
                    'email1',
                    'email2'
                ]
            }
        };
    }

    render() {
        const listItems = this.state.data.map((number,i) =>
          number.map((n,u)=>
            <li key={u} >{n}</li>
            )
        );

        return (
            <div>
                <ul>{listItems}</ul>
            </div>
        );
    }
}

错误是：

未捕获的TypeError：this.state.data.map不是函数。

请帮助我将此对象渲染为模板，并且我是React JS的新手。

Answer 1

this.state.data被定义为对象。array#map仅在数组上可用。

将this.state.data设置为数组。

this.state = {
            data : [
                first:[
                    'name1',
                    'name2'
                ],
                second:[
                    'email1',
                    'email2'
                ]
            ]

Answer 2

您正在使用this.state.data1代替this.state.data。

Answer 3

实际上，您不能真正map一个对象。您可以使用Object.keys(data)来获取其键，然后将其映射并获取数据值。

Object.keys(data).map(x=> {
  data[x].map((y,i)=> {
    <li key={u}>{y}</li>
  })
});

如何在React JS中渲染子对象数组？

3 个答案: