javascript - Promise 状态更改后子组件不会重新渲染..？

Question

我在 React 子组件中有一个函数可以发出 HTTP POST 请求。在其响应中，我使用了 this.setState 和 this.forceUpdate，但是该组件不会重新渲染。

我使用了 this.setState 和 this.forceUpdate 但是组件不会重新渲染。如果我将警报方法放在有效的响应中，它只是不会重新渲染

      axios({
        method: 'post',
        url: "https://56gbghdghgbbg&start="
        + start.format() + '&end=' + end,
        headers: {
          'Content-Type': 'application/json'
        },
        data: test,

        })
        .then(function (response) {
        this.setState({savePlaylist: "Saved Playlist",})
        //this doesn't cause a re-render

        })
        .catch(function (error) {


        });

      }

期望子组件重新渲染...什么也没有发生

Answer 1

axios({
  method: 'post',
  url: 'https://56gbghdghgbbg&start=' + start.format() + '&end=' + end,
  headers: {
    'Content-Type': 'application/json'
  },
  data: test
})
  .then(response => {
    this.setState({ savePlaylist: 'Saved Playlist' });
    //this doesn't cause a re-render
  })
  .catch(error => {});

将回调函数改为箭头函数。

您将无法在回调函数内访问 this.setState，函数的范围不同。

或者您可以按照我在下面提到的方式执行此操作

let self = this;
axios({
  method: 'post',
  url: 'https://56gbghdghgbbg&start=' + start.format() + '&end=' + end,
  headers: {
    'Content-Type': 'application/json'
  },
  data: test
})
  .then(function(response) {
    self.setState({ savePlaylist: 'Saved Playlist' });
    //this doesn't cause a re-render
  })
  .catch(function(error) {});