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は、2番目のレンダリングをトリガーしますが、最初のレンダーでは、stateの変更はsetStateには適用されません。

したがって、this.state.recordsにアイテムがあることを確認する防御コードが必要です。

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