请问如何将react中的state初始化成一个多层对象,并且中间层的对象存在数组

Question

首先我有一个多层对象，类似于

var a = {
        b:{
            c:{
                d:""
            }
        }
    }
    

如果我想要将a作为一个state请问应该如何初始化

以下是我的尝试

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:{}
        };
    }
    
    componentDidMount() {
        this.setState({data:a.b.c});
    }
    
    render(){
        return(
        <p>{this.state.d}</p>
        )
    }
 }
 

或者是

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:""
        };
    }
    
    componentDidMount() {
        this.setState({data:a.b.c.d});
    }
    
    render(){
        return(
        <p>{this.state}</p>
        )
    }
 }

也就是说只能将state初始化成c和d。所以想要请教一下如何初始化成a那种形式。

并且如何在里面定义数组呢，比方说b是一个含有4个元素的数组

Answer 1

这个样子？

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            a: {
                b: {
                    c: {
                        d: ''
                    }
                }
            }
        }
    }
    
    render() {
        return (
            <div>{this.state.a.b.c.d}</div>
        )
    }
}

Answer 2

this.state = {
    a,
}