>source

나는 새로운 것을 반응시키고 객체 내부에 중첩 된 배열에 액세스하는 방법에 대한 몇 가지 문제를 가지고 있습니다. 내가하고 싶은 것은 다른 파일에서 내 보낸 데이터 객체 안에 'name'객체를 렌더링하는 것입니다.

그러나 객체 내부에 중첩 된 배열에 액세스하려고 할 때 "정의되지 않은"오류가 발생합니다.

객체를 인쇄하려고하면 예상되는 결과를 얻으려고합니다. 똑같이 렌더링 함수 외부의 배열에 액세스하려고하면 작동하지만 어떤 이유로 렌더링 함수에서 작동하지 않는지 이해하지 못합니다.

내 추측은 반응에 객체 /배열에 대해 뭔가가 있음을 알지 못합니다.

나는 또한 .map을 사용해 보았지만 결과는 동일합니다.

내가 이해하지 못하는 어떤 단서도?

code는 다음과 같습니다.

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

randomdata.js :

export const data= {buildings :
    [
    {
        name: "something1",
        id: 1,
        members:
        {
            id: 1,
            firstName: "Hans",
            lastName: "Ottoson",
            personNumber: 198703259715
        }
    },
    {
        name: "something2",
        id: 2,
        members:
        {
            id: 1,
            firstName: "Clase",
            lastName: "Boson",
            personNumber: 195304251985
        }
    }
    ]
}

오류 i get은 "typeError : 정의되지 않은"0 '을 읽을 수 없습니다. "

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}}]

구성 요소가 처음으로 렌더링 할 때,이 ^ 스테이 팅 데이터는 빈 객체이므로 비어있는 객체입니다. STATE.HousingData [0]은 정해지지 않습니다. 한 가지 가능성은 귀하의 상태를 향상시키는 것입니다. this.state.HousingData가 진실인지 여부를 확인하는 대신에 실제로 요소가 포함되어 있는지 확인하십시오 (this.state.housingdata.length>0). 또한 배열로 초기화하면 더 의미가 있습니다.

Felix Kling2021-05-13 21:59:06
  • 이전 javascript : 사용자가 섹션으로 스크롤 한 후 경고를 표시하고 숨 깁니다
  • 다음 AWS CLI v2는 환경 변수를 선택하지 않습니다