Question

我在调用回调函数时无法设置状态有麻烦。但是我不确定为什么下面的第二个选项比我尝试的第一个选项有效。我以为setState的回调函数可以了。

function handleSendData() {

    console.log(this.state.experimentName)

}



//1st try was this.  Doesn't the callback in setState take a function, which I am giving it?  

this.setState({
  testChoice: testChoice,
  experimentData: experimentData
}, this.handleSendData())


//2nd try works but I don't know why I have to give setState's callback a function inside of a function.  

this.setState({
  testChoice: testChoice,
  experimentData: experimentData
}, () => {
  this.handleSendData()
})

Answer 1

在第一个示例中，您传递的是函数的结果，而不是实际函数本身。

因此它应该看起来像：

this.setState({
  testChoice: testChoice,
  experimentData: experimentData
}, this.handleSendData)

Answer 2

在第一次尝试中，您立即调用this.handleSendData并将返回值提供给setState。正确的方法是删除()，然后在设置状态时将函数作为要调用的引用传递。

应该是

this.setState({
  testChoice: testChoice,
  experimentData: experimentData
}, this.handleSendData) // removed the ()

Answer 3

您的问题是认为this.handleSendData()是一个函数，不是，它是函数执行的结果。

例如

function sum(){
    return 2 + 2;
}

sum()是4，不是函数，是函数的结果，函数是sum

因此，基本上可以做到以下几点：

1）像在2dn尝试中一样发送匿名函数。

this.setState({
  testChoice: testChoice,
  experimentData: experimentData
}, () => {
  this.handleSendData()
})

2）发送函数而不是执行它：

this.setState({
  testChoice: testChoice,
  experimentData: experimentData
}, this.handleSendData)

Answer 4

在第一个示例中，this.handleSendData()立即被调用：

const fn = callback => {
  console.log('in Fn');
  callback();
}

const handleSendData = a => {
  console.log('in handleSendData')
}

fn(handleSendData())
// notice in handleSendData logged before Fn

当您传递诸如handleSendData之类的引用时，引用会出现在fn()内

const fn = callback => {
  console.log('in Fn');
  callback();
}

const handleSendData = a => {
  console.log('in handleSendData')
}

fn(handleSendData)

setState回调语法在这里有什么区别？

4 个答案: