Javascript 获取TypeError:this.props在ReactJs上未定义

我正在尝试做教程：

我想不出这个问题。知道为什么吗？感谢使用和React时不会自动绑定类中声明的函数

因此，可以使用

this.loadCommentsFromServer.bind（this）

或使用箭头函数

---

loadCommentsFromServer=（）=>{}

随着React从createClass转移到

ES6类

我们需要自己将

此

的正确值处理到我们的方法中，如下所述： 更改代码，使方法绑定到Constructor中的正确值：

export default class ComponentClass extends React.Component {
  constructor(props) {
      super(props);
      this._myHandler = this._myHandler.bind(this);
  }

  _myHandler(props) {
    console.log(props);
  }

  render() {
    return (
        <div className="col-xs-6 col-md-4">
            <button type="button" className="btn btn-danger" onClick={this._myHandler}><i className="fa fa-trash"> Delete</i></button>
        </div>
    )
  }
}

---

尽管上述所有答案在技术上都是正确的，但在我的案例中它们并不适用。我收到了一些疯狂的错误“Missing class properties transform”（缺少类属性转换），因此我没有试图弄清楚，而是在事件中正确定义了处理程序，如下所示：

export class ComponentClass extends React.Component{
  _myHandler(event) {
    event.preventDefault();
    console.log(this.props.thingIPassedIn);
  }
  render() {
    return <Button onClick={(event) => this._myHandler(event)} type="button" className="btn btn-danger">Click Me!</Button>;
  }
}

导出类ComponentClass扩展React.Component{
_myHandler（事件）{
event.preventDefault（）；
console.log（this.props.thingIPassedIn）；
}
render（）{
返回此项。_myHandler（event）}type=“button”className=“btn btn danger”>单击我！；
}
}

也可以通过这种方式传递参数

export class ComponentClass extends React.Component{
  _myHandler(thingIPassedIn) {
    console.log(thingIPassedIn);
  }
  render() {
    return <MyOtherComponent defNotAnEvent={(thingIPassedIn) => this._myHandler(thingIPassedIn)} />;
  }
}

导出类ComponentClass扩展React.Component{
_myHandler（thingIPassedIn）{
console.log（thingIPassedIn）；
}
render（）{
返回此文件。_myHandler（thingIPassedIn）}/>；
}
}

将

道具传递给构造函数将有助于：

constructor(props) {
    super(props);
}

可以使用箭头函数对ajax代码进行如下改进，以避免范围问题并访问其中的道具

 loadCommentsFromServer = () => {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: (data) => {
            this.setState({data: data});
        },
        error: (xhr, status, err) => {
            console.error(this.props.url, status, err.toString());
        }
    })
}

我也是一个新手，在处理函数中的状态和道具时，有一件事值得注意，那就是使用函数变量ie

func（）{this.setState}
结果错误
func=（）=>{this.setState}
将起作用

同样的情况也存在

this.props
内部函数

注意，即使您没有在构造函数中使用function.bind（this）及其上下文

您能否在文档中提供错误位置以解决问题？url:this.props.url，您能否在ComentBox类中添加这段代码static defaultProps={//your props here:default value}，这也是如何使用React和ES6消除错误的一个很好的示例。但我似乎仍然无法加载Json文件。我在JSON数据应用程序的第1行第1列得到：undefined parsererror SyntaxError:JSON.parse:unexpected字符。js:34921:8 loadCommentsFromServer/您的JSON格式不正确。但我在react教程的示例中复制并粘贴了JSON数据。当我试着从组件内部加载它时，它就工作了。只是不使用ajax加载。请发布json。[{“作者”：“Pete Hunt”，“文本”：“这是一条评论”}，{“作者”：“Jordan Walke”，“文本”：“这是另一条评论”}，{“作者”：“Jordan Walke”，“文本”：“这是另一条评论”}]我认为这是真正的问题。如果定义构造函数，它需要在将其传递给super时接受props作为参数。如果不提供默认构造，React将为您处理此问题。
export class ComponentClass extends React.Component{
  _myHandler(thingIPassedIn) {
    console.log(thingIPassedIn);
  }
  render() {
    return <MyOtherComponent defNotAnEvent={(thingIPassedIn) => this._myHandler(thingIPassedIn)} />;
  }
}

constructor(props) {
    super(props);
}

 loadCommentsFromServer = () => {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: (data) => {
            this.setState({data: data});
        },
        error: (xhr, status, err) => {
            console.error(this.props.url, status, err.toString());
        }
    })
}