реагировать на изменение состояния компонента после вызова AJAX, но не перерисовывает компонент

Question

На этой части пользователь получает возможность комментировать посты.После проверки на стороне сервера и получения данных я пытаюсь изменить значение this.state.comments.и так сделано.Но проблема в том, что это не меняет раздел комментариев на компонент.Я читал предыдущие вопросы о рендеринге, поэтому, пожалуйста, не отмечайте как дубликат.Ниже приведен код:

$.post("requests.php", {
    requestKey: 'newComment',
    commenterUser: commenterUser,
    commenterEmail: commenterEmail,
    theComment: theComment,
    pnum: pnum}, function(data, status, xhr){
      if(status == 'success'){
        if(data == 'commented'){
          this.setState({
            comments: data
          })
        }else{

        }
      }
    });

Полученное data - это все комментарии, относящиеся к посту, а раздел комментариев - это место, где отображаются все комментарии.

Answer 1

Вы можете также использовать функцию стрелки вместо ручной привязки.

this.setState не работает, поскольку при использовании обычной функции возникает проблема с областью действия.

Измените его на функцию стрелки.Проверьте ниже код

   $.post("requests.php", {
        requestKey: 'newComment',
        commenterUser: commenterUser,
        commenterEmail: commenterEmail,
        theComment: theComment,
            pnum: pnum}, (data, status, xhr) => {
                if(status == 'success'){
                    if(data == 'commented'){
                        this.setState({
                            comments: data
                        })
                    }else{

              }
           }
       });

Редактировать:

Если вы хотите избежать проблем с областью действия, вы можете использовать функцию стрелки.Когда вы используете функцию стрелки, вам не нужно связывать свою функцию вручную в конструкторе

 submitComment = () => {

 }

Если вы используете обычную функцию и играете с состоянием или подпорками внутри этой функции, то вам нужно вручную ссылаться на текущий объектлокальная переменная, как показано ниже

 let that = this;
 that.setState({
     name: “update”
 });

Извините, если есть какие-либо опечатки.Я отвечаю в мобильном

Answer 2

У вас есть проблема с областью действия.

Давайте рассмотрим этот пример:

function foo() {
    this.bar = 'lorem';
    this.ipsum = function() {
        console.log(this.bar);
    };
}

Если вы позвоните ipsum, он будет регистрировать undefined, потому что this там ссылаетсядо ipsum function.Давайте рассмотрим этот пример:

function foo() {
    this.bar = 'lorem';
    var that = this;
    this.ipsum = function() {
        console.log(that.bar);
    };
}

В этом случае that хранит внешний this, поэтому 'lorem' будет зарегистрирован, если вызывается ipsum.Давайте рассмотрим пример функции стрелки:

function foo() {
    this.bar = 'lorem';
    this.ipsum = () => {
        console.log(this.bar);
    };
}

В этом случае при вызове ipsum 'lorem' будет записано на консоль.

Вы также можете использовать для этой цели bind .

Давайте используем функцию стрелки для вашего примера:

$.post("requests.php", {
    requestKey: 'newComment',
    commenterUser: commenterUser,
    commenterEmail: commenterEmail,
    theComment: theComment,
    pnum: pnum}, (data, status, xhr) => {
      if(status == 'success'){
        if(data == 'commented'){
          this.setState({
            comments: data
          })
        }else{

        }
      }
    });

Answer 3

let _this = this;
$.post("requests.php", {
  requestKey: 'newComment',
  commenterUser: commenterUser,
  commenterEmail: commenterEmail,
  theComment: theComment,
  pnum: pnum
}, function(data, status, xhr){
    if  (status == 'success'){
       if(data == 'commented'){
          _this.setState({ comments: data })
       } else{

       }
    }
});

Я думаю, что проблема связана с вашей областью действия this, в javascript this всегда в лексическом контексте.