尝试重新呈现我的 UI（使用 React.js 和 Rails）时，我收到“未捕获的类型错误：无法读取未定义的属性“记录”

Question

我正在学习 React，需要一些有关 handleSubmit 事件的帮助。我知道在使用 setState 时，它​​会更新组件的本地状态并触发 UI 的刷新。但是在尝试将新数据推送到道具时出现错误。 “Uncaught TypeError: Cannot read property 'records' of undefined” 我已经一遍又一遍地阅读了文档以及其他几篇文章，对此我无法理解。请帮忙...

这是我的组件：（所有记录）

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

    this.state = {
        records: ''
    }

    this.handleNewRecord = this.handleNewRecord.bind(this);

  }

  componentDidMount() {
     this.setState({
        records: this.props.records
     })
  }
 handleNewRecord(record) {
    console.log(record);
    const newRec = this.state.records.slice(); 
    newRec.push(record);
    this.setState({
        records: newRec
    })
 }


 render() { 
    const records = this.props.records.map((record) =>
          <Record record={record} key={record.id} />
                )
                return (
                <div className="container">
                    <h1>Records</h1>
                    <RecordForm handleNewRecord={this.handleNewRecord}/>
                    <table className="table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Title</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            {records}
                        </tbody>
                    </table>
                </div>
            )   
  }     
}

（单条记录）

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

    }

render() {
    return(
        <tr>
            <td>{this.props.record.date}</td>
            <td>{this.props.record.title}</td>
            <td>{this.props.record.amount}</td>
        </tr>
    )
  }
}

（记录表格）

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

      this.state = {
            record: {
                title: '',
                amount: '',
                date: ''
            }
      }

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);

   }

handleChange(e) {
var key = e.target.name
var val = e.target.value
var obj  = this.state.record
obj[key] = val
this.setState(obj)
}

handleSubmit(e) {
    var that = this;
    e.preventDefault();
    $.ajax({
        method: 'POST',
        data: {
            record: this.state.record,
        },
        url: '/records',
        success: function(res) {
            that.props.handleNewRecord(res)
        },
    })
    console.log('submitted');
}

render () {
  return (
            <form className="form-inline" onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>
                        <input className="form-control" placeholder="date" type="text" name="date" value={this.state.record.date} onChange={this.handleChange} /><br />
                    </label>
                    <label>
                        <input className="form-control" placeholder="title" type="text" name="title" value={this.state.record.title} onChange={this.handleChange} /><br />
                    </label>
                    <label>
                        <input className="form-control" placeholder="amount"  type="text" name="amount" value={this.state.record.amount} onChange={this.handleChange} /><br />
                    </label>
                    <label>
                        <button className="btn btn-primary" type="submit" value="submit" >Create Record</button><br />
                    </label>
                </div>
            </form>
  );
 }
}

Answer 1

在您的代码中，您缺少的一件事是正确绑定 Records Component 中的函数。为了使您的状态可用于函数，您应该将其绑定到component's scope。同样，当assigning props to the initial state 是anti-pattern 时，您应该将状态变量设置为componentDidMount 函数中的道具。 另一件事是，当您将prop records 分配给state variable 时，您可以从状态中使用它，而不是在地图组件中使用道具。

记录

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

    this.state = {
        records: ''
    }
  }
 componentDidMount() {
    this.setState({records: this.props.records});
 }
 handleNewRecord = (record) => {
    console.log(record);
    const newRec = this.state.records.slice(); 
    newRec.push(record);
    this.setState({
        records: records
    })
 }


 render() { 
    const records = this.state.records.map((record) =>
          <Record record={record} key={record.id} />
                )
                return (
                <div className="container">
                    <h1>Records</h1>
                    <RecordForm handleNewRecord={this.handleNewRecord}/>
                    <table className="table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Title</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            {records}
                        </tbody>
                    </table>
                </div>
            )   
  }     
}