传递给 onChange 方法的子组件时出现 "Cannot read props of undefined" 错误

Question

将 onchange 函数传递给子组件时出现 "Cannot read props of undefined" 错误，但是，当控制台记录 props 时，会显示正确的属性。

我之前这样做过，我将一个 onClick 属性传递给一个子按钮，这似乎工作正常。

错误消息仅在尝试编辑字段时出现。

Console logged props

父组件

//Parent component
  onChange = e => {
    e.preventDefault();
    console.log(e);
  }

  render(){
    return(
      <div className="App">
        <div className="cardRow">             
              <Card question={this.state.currentCard.question} 
                    answer={this.state.currentCard.answer} 
                    source={this.state.currentCard.source}
                    onClick={this.submitUpdate.bind(this)}
                    recordChange={this.onChange.bind(this)}>{this.state.update}</Card>  
                .....
                
  //child component
  class Card extends Component {
    
    //the below code is where the error message is pointing
    recordChange(){
        this.props.recordChange();
    }

    onSubmit(){
        this.props.onSubmit();
    }

    render(props){
        console.log(this.props);
        return(
            <div className="card-container">
                    {this.props.children? 
                        <div className="cardUpdate"> 
                            <form className="update-form">
                                <h5>Front</h5>
                                    <input  type="text"
                                            value={this.props.question}
                                            onChange={this.recordChange}/>
                                <h5>Answer</h5>
                                <textarea  type="text"
                                            value={this.props.answer}
                                            onChange={this.recordChange}/>
                                <h5>Source</h5>
                                <input  type="text"
                                            value={this.props.source}
                                            onChange={this.recordChange}/>
                                <div>
                                    <button onClick={this.props.onClick}>Submit</button>    
                                </div>
                            </form>
                        </div>        
                        :
                            <div className="card">
                                <div className="front">
                                    <div className="question">{this.props.question}</div>
                                </div>
                                <div className="back">
                                    <div className="answer">{this.props.answer}</div>
                                    <div className="source">{this.props.source}</div>
                                </div>
                            </div>
                    }      
            </div>
        );
    }

Answer 1

recordChange 在 class.

的上下文中无法访问 this

recordChange() {
  // 'this' is undefined.
  this.props.recordChange();
}

但是，如您所见，render 中的 console.log(this.props); 工作正常。这是因为 render 是在 class 的上下文中调用的；而 recordChange 不是。

将其更改为箭头函数，以便 this 在范围内：

recordChange = () => {
  this.props.recordChange();
}

或者在构造函数中绑定到this：

constructor(props) {
  super(props);
  this.recordChange = this.recordChange.bind(this);
}

recordChange(){
  this.props.recordChange();
}

或者更好：

完全不要使用子函数。如果它所做的只是从 props 调用函数，则没有必要。只要做 onChange={this.props.recordChange}

传递给 onChange 方法的子组件时出现 "Cannot read props of undefined" 错误

Getting error of "Cannot read props of undefined" when being passed to child component for onChange method

javascript

undefined

reactjs

react-props