Question

我在react子组件中有一个函数，该函数发出HTTP发布请求。在响应中，我使用了this.setState和this.forceUpdate，但是该组件未重新呈现。

我使用了this.setState和this.forceUpdate，但是该组件未重新呈现。如果我将alert方法放入响应中，那么它就不会重新渲染

      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) {});

在Promise中更改状态后，子组件不会重新呈现。.

1 个答案: