this.state.records.amount가 정의되지 않은 이유는 무엇입니까?

Question

나는 현재 상태를 학습하고 내 상태에 문제가있는 중입니다. 구성 요소가 렌더링 될 때 this.state.records.amount을 내 콘솔에 기록하는 기능을 얻으 려하지만 정의되지 않은 것으로 표시됩니다. 누군가가 이것을 이해할 수 있다면 그것은 대단히 감사 할 것입니다.

기록 구성 요소 :

class Records extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     records: [] 
    } 

    this.handleNewRecord = this.handleNewRecord.bind(this); 
    this.handleDeleteRecord = this.handleDeleteRecord.bind(this); 
    this.surplus = this.surplus.bind(this); 
    this.debt = this.debt.bind(this); 
    this.total = this.total.bind(this); 
} 

componentDidMount() { 
    this.setState({ 
     records: this.props.records 
    }) 
} 

handleNewRecord(record) { 
    let records = this.state.records.slice(); 
    records.push(record) 
    this.setState({ 
     records: records 
    }) 
} 

handleDeleteRecord(record) { 
    let records = this.state.records.slice(); 
    let index = records.indexOf(record) 
    records.splice(index, 1) 
    this.setState({ 
     records: records 
    }) 
} 

surplus() { 
    console.log(this.state.records[0].amount) 
    } 

debt() { 
    console.log("debt") 
} 

total() { 
    console.log("total") 
} 


render() { 
    const records = this.state.records.map((record) => 
     <Record record={record} key={record.id} handleDeleteRecord={this.handleDeleteRecord}/> 
    ) 
    return (
      <div className="container"> 
       <h1>Records</h1> 
       <div className="row"> 
        <AmountBox panelClass="panel panel-primary" panelHeader="Surplus" calculatedAmount={this.surplus()} /> 
        <AmountBox panelClass="panel panel-warning" panelHeader="Debt" calculatedAmount={this.debt()} /> 
        <AmountBox panelClass="panel panel-success" panelHeader="Total" calculatedAmount={this.total()} /> 
       </div> 
      <RecordForm handleNewRecord={this.handleNewRecord}/> 
      <table className="table"> 
       <thead> 
        <tr> 
         <th>Date</th> 
         <th>Title</th> 
         <th>Amount</th> 
         <th>Actions</th> 
        </tr> 
       </thead> 
       <tbody> 
        {records} 
       </tbody> 
      </table> 
     </div> 
    ) 
}  
} 

금액 상자 구성 요소 :

class AmountBox extends React.Component { 
constructor(props) { 
    super(props); 
} 

render() { 
    return (
      <div className="col-md-4"> 
       <div className={this.props.panelClass}> 
        <div className="panel-heading"> 
         <h3 className="panel-title">{this.props.panelHeader}</h3> 
        </div> 
        <div className="panel-body"> 
         <p> 
          {this.props.calculatedAmount} 
         </p> 
        </div> 
       </div> 
      </div>   
    ) 
} 
} 

Answer 1

this.state.records[0].amount 때문에 먼저 (생성자) records[]에 설정되어 렌더링에 undefined입니다.

setState은 두 번째 렌더링을 트리거하지만 state의 변경 사항은 setState에 적용되지 않습니다.

따라서, this.state.records에 아이템이 있는지 확인하는 방어적인 코드가 필요합니다.

surplus() { 
    this.state.records.length ? this.state.records[0].amount : 0; 
}