爲什麼this.state.records.amount未定義？

Question

我正在學習React的過程中，並且遇到了一些麻煩。我試圖獲取一個函數，在組件呈現時將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是undefined因爲第一渲染要設置records到[]（在構造函數）。

setState將觸發第二次渲染，但在第一次渲染中state的更改減少setState將不適用。

所以，你需要一些防禦性的代碼，確保this.state.records有項目。

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