什么＆＃34;这＆＃34;代表反应成分？ （this.state ..）

Question

这个问题让我很头疼。设置状态时decimal关键字无法在this内访问。

我想我很想知道反应组件的工作原理。

如何在这种特定情况下使用ajax call关键字，如下所示？一般情况下，this无法访问。

this

编辑：问题解决了！

感谢所有人的贡献。

class PollsList extends Component {
    constructor() {
        super();

        this.state = {
            polls: []
        }
    }
    componentDidMount() {
        $.ajax({
            url: "/mypolls",
            type: 'get',
            dataType: 'json',
            contentType: 'application/json',
            success: function (polls_list) {
                console.log(polls_list);

                for (let i = 0; i < polls_list.length; i++) {
                    let data = polls_list[i].poll[0];
                     this.setState(()=>{polls:data});
                }
            },
            error: function (err, status, xhr) {
                console.log(err);
            }
        });
    }
    render() {
        return (
            <Fragment>
                <div class='container'>
                    <ul id='polls_list'>{this.state.polls}</ul>
                </div>
            </Fragment>
        )
    }
}

Answer 1

在这种情况下，您在此函数的上下文中使用this而不是组件类：

function (polls_list) {
  for (let i = 0; i < polls_list.length; i++) {
    let data = polls_list[i].poll[0];
    this.setState(()=>{polls:data});
  }
}

处理这种情况的更好做法是绑定this，它仍然在组件构造函数的组件上下文中：

class PollsList extends Component {
  constructor() {
    super();

    this.state = {
        polls: []
    }

    this.successHandler = this.successHandler.bind(this);
  }

  componentDidMount() {
    $.ajax({
        url: "/mypolls",
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        success: this.successHandler(polls_list),
        error: function (err, status, xhr) {
            console.log(err);
        }
    });
  }

  successHandler(polls_list) {
    for (let i = 0; i < polls_list.length; i++) {
      let data = polls_list[i].poll[0];
      this.setState(()=>{polls:data});
    }
  }

  render() {
    ...     
  }
}

Answer 2

快速修复就是

const var that = this

在componentDidMount中，然后使用that.setState

这样做的目的是在＆＃34;＆＃34;中保存这个内容。变量供以后使用。 或者更好地做到这一点

success: function (polls_list) {
                console.log(polls_list);

                for (let i = 0; i < polls_list.length; i++) {
                    let data = polls_list[i].poll[0];
                     this.setState(()=>{polls:data});
                }
            }.bind(this),

这会将上下文绑定到成功函数

Answer 3

将this绑定到构造函数中的成功处理程序。这应该解决this object

的范围

constructor (args) {
   super(...args);
   /* some state variables */

   this.successHandler = this.successHandler.bind(this);
}

function successHandler(polls_list) {
  for (let i = 0; i < polls_list.length; i++) {
     let data = polls_list[i].poll[0];
        this.setState(()=>{polls:data});
   }
}

function (err, status, xhr) {
   console.log(err);
}

componentDidMount() {
  $.ajax({
    url: "/mypolls",
    type: 'get',
    dataType: 'json',
    contentType: 'application/json',
    success: successHandler,
    error: errorHandler
  });
}

Answer 4

我认为解决此问题最简洁的方法是使用胖箭头函数（自动绑定到组件）。所以你的组件看起来像这样：

class PollsList extends Component {
    // You can also set default state if your webpack can handle it
    state = {
        polls: []
    }
    componentDidMount() {
        $.ajax({
            url: "/mypolls",
            type: 'get',
            success: this.successHandler,
        });
    }
    // Fat arrow functions auto binds to this to the Class
    successHandler = response => { 
        // handle the response
    } 
    render() {
        return (
            <Fragment>...</Fragment>
        )
    }
}