Question

出于某种原因，我第一次无法更新组件的状态。我有一个触发函数uploadInfo()的按钮，用于检查属性是否已更改，如果已更改，则将previousState设置为它。特别是这一行：this.setState({ previousState })由于某种原因从未触发过。

function uploadInfo() {
  this.changeProperty();
  let info = {
    name: 'Red Cup',
    price: 10,
    supply: 500,
    previousState: this.state.previousState,
    counter: this.state.counter, 
  }

  uploadEntry(info)
    .then(res => {
      let hashes = [...this.state.hashes, res]
      this.setState({ hashes, counter: this.state.counter + 1 })
    })
    .catch(err => console.log(err))
}

function changeProperty() {
  if (this.state.counter != 0) {
    let previousState = this.state.hashes[this.state.counter - 1]
    this.setState({ previousState })
  }
}

Answer 1

在类中创建函数时，如果要访问this范围，则需要在构造函数中绑定它们，或使用ES6箭头函数。尝试将您的函数changeProperty更改为：

changeProperty = () => {
  if (this.state.counter != 0) {
    let previousState = this.state.hashes[this.state.counter - 1]
    this.setState({ previousState })
  }
}

more info on react bind vs arrow functions

Answer 2

我在构造函数中找到了更好的方法

 class myClass {
    constructor(props) { 
      super(props);   
   }
 this.changeProperty = this.changeProperty.bind(this);
}

这样，当您想要引用该功能时，您确实可以毫无问题地调用this.changeProperty

其他的事情是我不知道你在这里使用这个回调你想做什么，但是在then你赢了之前没有做任何事情

uploadEntry(info) {
    .then(res => {
      let hashes = [...this.state.hashes, res]
      this.setState({ hashes, counter: this.state.counter + 1 })
    }).catch(err => console.log(err));
}

希望有帮助：）

无法在React中运行setState？

2 个答案: