ReactJS无法读取未定义的属性“setState”

ReactJS cant read property 'setState' of undefined

本文关键字：属性 setState 未定义 读取 ReactJS      更新时间：2023-09-26

以此为参考，反应.js - 在表单提交时和之后显示一条消息，我正在尝试复制类似的东西，但我在控制台中遇到错误，"未捕获的类型错误：无法读取未定义的属性'setState'"。我无法确定我在状态组件中丢失了"this"引用的位置。

import React from 'react'
import RadarInput from './radarInput'
class RadarForm extends React.Component {
  constructor(props) {
    super(props);
  }
  onFormSubmit = (data, cb) => {
    cb(data);
  }
  render() {
    return (
      <div>
        <RadarInput OnRadarSubmit={this.onFormSubmit.bind(this)} />
      </div>
    )
  }
}
export default RadarForm

import React from 'react'
class RadarInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value:"Hello!", message: ''}
  }
  handleChange = (evt) => {
    this.setState({value: evt.target.value });
  }
  sendContent = function(e) {
    console.log("I'm in content")
    console.log("this is e: ", this.state.value);
    e.preventDefault();
    var radarNum = this.state.value
    this.setState({value: '', message: 'Please wait ...'});
    this.props.OnRadarSubmit({
      value: radarNum
    }, function(data){
      console.log("data in cb ", data.value);
      this.setState({ message: data.value });
    });
  }
  render() {
    return (
      <div>
        Title: <div>{this.state.message}</div>
        <form onSubmit={this.sendContent.bind(this)}>
          Radar Number: <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />
          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}
export default RadarInput
您需要

先将this设置为OnRadarSubmit()回调之外的变量。

var self = this;
this.props.OnRadarSubmit({ value: radarNum}, function(data){
    console.log("data in cb ", data.value);
    self.setState({ message: data.value });
});

原因是在回调中，this不再引用类作用域，因此通过设置 self ，您显式使用封闭作用域。

进一步阅读。

相关文章：