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)}>，否则，每次进行渲染时都会调用该函数，因此始终如此。在使用() =>之前，您要告诉程序仅在onPress上运行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);

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

2 个答案: