Reactjs 为什么此.state.records.amount未定义？

我正在学习反应，我的状态有些问题。我正在尝试获取一个函数，以便在呈现组件时将

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

类记录扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
记录：[]
}
this.handleNewRecord=this.handleNewRecord.bind（this）；
this.handleDeleteRecord=this.handleDeleteRecord.bind（this）；
this.盈余=this.盈余.bind（this）；
this.debt=this.debt.bind（this）；
this.total=this.total.bind（this）；
}
componentDidMount（）{
这是我的国家({
唱片：这个。道具。唱片
})
}
手持记录（记录）{
让records=this.state.records.slice（）；
记录。推送（记录）
这是我的国家({
记录：记录
})
}
手持电子记录（记录）{
让records=this.state.records.slice（）；
让index=records.indexOf（record）
记录.拼接（索引，1）
这是我的国家({
记录：记录
})
}
盈余（）{
console.log（this.state.records[0].amount）
}
债务（）{
控制台日志（“债务”）
}
总数（）{
控制台日志（“总计”）
}
render（）{
const records=this.state.records.map（（记录）=>
)
返回(
记录
日期
标题
数量
行动
{记录}
)   
}     
}

金额框组件：

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

class AmountBox扩展了React.Component{
建造师（道具）{
超级（道具）；
}
渲染（）{
返回(
{this.props.panelHeader}

{this.props.calculatedAmount}

)
}
}

此.state.records[0]。金额
未定义，因为在第一次渲染时，您将
记录设置为
[]
（在构造函数中）

setState
将触发第二次渲染，但在第一次渲染中，
setState
对
状态的更改将不适用

因此，您需要一些防御性代码，以确保
this.state.records
具有条目

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

或者使用类似lodash
\的方法。get
这样你就不必每次都检查整个路径：）如果我想记录所有的金额呢？一旦我删除
[0]
我就会得到一个未定义的数组，对吗？因此，您必须通过值映射，我理解。但是，如果没有防御代码，这仍然是未定义的？我真正想在函数中放入的是类似于“盈余（）{var盈余=this.state.records.filter（（value）=>value.amount>=0）盈余.减少（（总计，金额）总计+金额）}”