React Native 嵌套箭头函数和普通箭头函数的区别

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 returns 错误（超出最大调用堆栈大小）我想知道这两个函数有什么区别，function1 是否可以称为回调函数。

Answer 1

第二个无效

箭头函数的原型如下：

variableName = (arguments) => {
    Body
}

您的 onPress 应该是：onPress = {() => this.pick(curJob,i)}>，否则，每次渲染发生时都会调用该函数，所以总是如此。使用 () => 之前，您告诉程序仅运行 this.pick onPress

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

React Native 嵌套箭头函数和普通箭头函数的区别

React Native difference between nested arrow function and normal arrow function

javascript

react-native

native-base