Javascript 显示从阵列到反应组件的内容

我正在尝试将我的AboutPageContent.js显示为AboutPageContent.js。我想我得想办法把它画出来，但我不知道怎么画

相关代码 AboutPage.js

import React from 'react';

// CSS import statements
import '../css/AboutPage.css';
import '../css/App.css';

// Content import Statements
import AboutPageContent from '../content/AboutPageContent.js';

class About extends React.Component {
    constructor(props) {
        super(props);
        this.state = AboutPageContent;
    }

    render() {
    return(
        <div className='about-page'>
            <div className='page-header'>{this.state.about.name}</div>
            <div>{this.state.about.desc.map(paragraph => <p>{paragraph}</p>)}</div>
        </div>
    )
    }
}

export default About;

let AboutPageContent = {
    about: [{
        name: 'About Me',
        desc: [
            'p1',
            'p2',
            'p3',
            'p4',
            'p5',
            'p6'
        ],
        id: 1
}]};

export default AboutPageContent;

---

您必须执行2个

map

s，1个用于

state.about

，另一个用于

state.about[i].desc

类关于扩展React.Component{
建造师（道具）{
超级（道具）；
this.state=AboutPageContent；
}
render（）{
返回(
{this.state.about.name}
{this.state.about.map（（currout）=>
curraout.desc.map（（段落，i）=>
{paragration}
）
)}
);
}
}

或者，如果要显示当前的

about.name

，请将

..

移动到

此.state.about

循环中

类关于扩展React.Component{
建造师（道具）{
超级（道具）；
this.state=AboutPageContent；
}
render（）{
返回(
{this.state.about.map（（curraout，i）=>(
{curraout.name}
{curraout.desc.map（（第i段）=>(
{paration}
))}
))}
);
}
}

---

您的

this.state.about

是一个数组，因此不能使用点符号引用

名称
和
desc
属性。当前，
this.state.about.name
将未定义
this.state.about[0]。name
将等于“about Me”

我只需删除
this.state.about
属性周围的[]s。这将使它成为一个对象（而不是数组），因此代码的其余部分应该可以正常工作。将
this.state.about.desc保留为数组，以便可以使用map方法。
您可以通过这种方式访问对象
state.about[0]


const AboutPageContent={
关于：[
{
姓名：“关于我”，
描述：[“p1”、“p2”、“p3”、“p4”、“p5”、“p6”]，
id:1，
},
],
};
类关于扩展React.Component{
建造师（道具）{
超级（道具）；
this.state=AboutPageContent；
}
render（）{
返回(
{this.state.about[0].name}
{this.state.about[0].desc.map（（段落）=>(
{段落}

))}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);