嵌套箭头功能和法线箭头功能之间的反应本机差异

Question

let arr;
for (var i = 0; i < 4; i++) {
  arr.push(
    <ListItem key={i}> // native-base component
      <Button
        onPress={this.pick(curJob, i)}>
      </Button>
    </ListItem>
  )
}


render(){
  return (
    { arr }
  )
}

在此代码中，两个函数有什么区别？

功能1。

pick = (job,index) => {
  console.log(job);
  console.log(index);
}

功能2。

pick = (job,index) => () => {
  console.log(job);
  console.log(index);
}

我发现函数2正常工作，但函数1返回错误（超出最大调用堆栈大小）我想知道这两个函数有什么区别，是否可以将function1称为回调函数。

Answer 1

第二个无效。

箭头功能的原型如下：

variableName = (arguments) => {
    Body
}
您的onPress应为：onPress = {() => this.pick(curJob,i)}>，否则，每次进行渲染时都会调用该函数，因此始终如此。在使用() =>之前，您要告诉程序仅在按[Press]时运行this.pick

Answer 2

 pick = (job,index) => () => {
                console.log(job);
                console.log(index);
           }

这只是函数返回等于]的函数>

nestedfunc(job, index) => {
  console.log(job);
  console.log(index);
}


pick = (job,index) => nestedfunc(job,index);