Question

我正在学习React，所以对我温柔，我是一个新手。我有这个组件：

import React from 'react';
import HttpHandler from './../services/HttpHandler';
import Podcast from './Podcast/Podcast';

class Master extends React.Component{
    constructor(){
        super();
        this.api = new HttpHandler();
        this.podList = this.api.getAllPodcasts();
        this.http = "";
        this.api.getHttpResponse(function(responseData){
            var datos = responseData;
            this.http = datos;
        }, function(error){
            this.http = error;
        });
    }

    render(){
        return (
            <div>
                <h1>Master</h1>
                <ul>
                    {this.podList.map((podcast) => <li>{podcast}</li>)}
                </ul>
                <p>API Response: {this.http}</p>
            </div>
        );
    }
}
// ========================================

export default Master;

此组件使用HttpHandler clads启动XmlHttpRequest GET。成功响应后，我执行回调函数，当我尝试处理响应时，一切都很完美，var this.http未定义，我得到了TypeError: undefined is not an object (evaluating 'this.http = datos')。很明显我有一个糟糕的变量声明，这将是实现的方式吗？

Answer 1

如果要表示对REST请求的响应，则应该使用React的状态。执行此操作的最佳方法是componentDidMount。你的构造函数应该是这样的：

constructor(){
    super();
    this.state={
      http: "",
    }
}

然后，您将在componentDidMount：

中发出http请求

componentDidMount(){
    let api = new HttpHandler();
    let podList = api.getAllPodcasts();
    let http = ""
    var that = this;
    api.getHttpResponse(responseData =>{
        let datos = responseData;
        that.setState({
            http: datos,
        });
    }, function(error){
        that.setState({
            http: error,
        });
    });
}

最后，在您的render方法中，您可以访问状态的属性http：

 <p>API Response: {this.state.http}</p>

这是在React中执行此操作的方法。在第一个渲染中，http将为空，然后在componentDidMount中将更新，setState将自动触发重新渲染。

Answer 2

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

tl; dr，问题：

const _this = this
this.api.getHttpResponse(function(){
    this === _this // false
});

可选解决方案

将此分配给更高范围的_this并在回调中使用

使用箭头功能，所以它不会在里面创建一个新的（es6）

const _this = this; 
this.api.getHttpResponse(()=>{
    this === _this // true
});

将此绑定到回调（es5）

var _this = this
this.api.getHttpResponse(function(){
    this === _this // true
}.bind(this))`

React - 在React组件上使用变量时出错

2 个答案: