Arrays 对象中的嵌套数组返回'；未定义'；在JSX中访问时

我是个新手，对如何访问对象内部的嵌套数组有些问题。我要做的是在从另一个文件导出的数据对象中呈现“name”对象

然而，当我试图访问嵌套在对象中的数组时，我总是会遇到一个“undefined”错误

当我尝试打印对象时，我得到了预期的结果。同样，当我尝试在渲染函数外部访问数组时，它可以工作，但由于某些原因，我不明白它在渲染函数内部不工作

我猜React中的对象/数组有些东西我不太理解

我也尝试过使用.map，但结果是一样的

关于我不明白的事情有什么线索吗

代码如下所示：

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import {data} from './RandomData';

export default class Building extends React.Component {

    constructor(){
        super();
        this.state = {
            isLoaded: false,
            selectedBuilding: '',
            housingData:{}
        }
    }

    componentDidMount(){
       this.timeoutId = setTimeout(() => {
        this.setState({
            isLoaded: true,
            error: null,
            housingData: data,
            selectedBuilding: data.buildings[0].name
        } );   
       } ,3000);
        
    }
    
    componentWillUnmount(){
        clearTimeout(this.timeoutId);
    }


    render(){
        const loading = (<h1>loading...</h1>);
        const loadingComplete = (
                <Row>
                    <Col>{this.state.housingData ? <h1>{this.state.housingData.buildings[0].name}</h1> : ''}</Col>
                </Row>
        );

        return (
             <Container fluid>{this.state.isLoaded ? loadingComplete : loading}</Container>
        )
    }
}

[{"name":"something1","id":1,"members":{"id":1,"firstName":"Hans","lastName":"Ottoson","personNumber":198703259715}},{"name":"something2","i":2,"members":{"id":1,"firstName":"Clase","lastName":"Boson","personNumber":195304251985}}]

我得到的错误是“TypeError:无法读取未定义的属性“0”

---

组件第一次呈现时，

this.state.housingData

是一个空对象，因此

this.state.housingData[0]

确实是

未定义的

如果我将[…]更改为[…]，对象会像这样打印[…]

您将看到组件的第二次渲染的输出。这“起作用”，因为代码更改在组件的第一次渲染中不再导致错误


以下是您的问题的简化示例：


var housingData={}；
住房数据？housingData[0]。foo:null
非常感谢，我的头发都秃了。。。Truthy和falsy抓了我很多次。需要了解更多！是的，将housingData初始化为数组更有意义！再次衷心感谢@费利克斯你好，先生，你能帮我接电话吗
  61 |         <Row>
> 62 |         <Col>{this.state.housingData ? <h1>{this.state.housingData.buildings[0].name}</h1> : ''}</Col>
  63 |    </Row>
  64 |     </Row>
  65 | );

<Row>
<Col>
{this.state.housingData ? <h1>{this.state.housingData.buildings[0].name}</h1> : ''}
</Col>
</Row>

<Row>
<Col>
{this.state.housingData ? <h1>{JSON.stringify(this.state.housingData.buildings)}</h1> : ''}</Col>
</Row>

[{"name":"something1","id":1,"members":{"id":1,"firstName":"Hans","lastName":"Ottoson","personNumber":198703259715}},{"name":"something2","i":2,"members":{"id":1,"firstName":"Clase","lastName":"Boson","personNumber":195304251985}}]