Question

这可能不仅适用于React Native，但我确实想了解这里发生了什么。

采用以下5行代码。第3行将导致应用程序无法在Expo中呈现。

<Button onPress={this.filterOfficeTypePitt} title="Pitt" />
<Button onPress={this.filterOfficeTypeAtl} title="Atl" />
<Button onPress={this.filterOfficeType("pitt")} title="DOES NOT WORK" />
<Button onPress={(e) => this.filterOfficeType("pitt")} title="Pitt" />
<Button onPress={(e) => this.filterOfficeType("atl")} title="Atl" />

我有点理解每一行的内容。

第1行和第2行：直接调用组件中的方法。

第3行：尝试做同样的事情并传递一个值。这会导致应用程序崩溃。原因是超出最大深度。

第4行和第5行：我认为这是一个传递anon函数的函数，并且突然允许我添加一个字符串值。

一旦我使用4和5，我就可以使用单一方法并让它过滤列表。当我使用1和2时，我必须为每个人提供一种独特的方法。

我只想更好地理解它会发生什么，以及为什么＃3无法正常工作。我相信我至少需要更好地理解箭头功能。

包括辅助函数的代码。它基本上从索引数组中获取数据并将其推送到FlatList组件中。

filterOfficeType(officetype){
  let newarray = [];
  this.state.fulldataSource.forEach((element, index) => {
    if(element.office === officetype) {
      newarray.push(element);
    }
  });
  this.setState({
    dataSource:newarray,
    office:officetype
  });
}

filterOfficeTypePitt = () => {
  this.filterOfficeType("pitt");
}
filterOfficeTypeAtl = () => {
  this.filterOfficeType("atl");
}

Answer 1

第3行正在执行该功能并尝试将其结果分配给onPress道具。它永远不会到达那里（为什么？：在下面解释）

const Button = {
   onPress: this.filterOfficeType("pitt")
}

注意：在创建Button对象时调用函数。

而其他行则将函数分配给onPress prop

const Button = {
   onPress: this. filterOfficeTypePitt
}

或

const Button = {
   onPress: (e) => {
      this.filterOfficeType("pitt")
   }
}

注意：该函数不会被称为Button对象创建，而是当某些按下该按钮时

为什么第3行会导致应用程序崩溃，因为它会通过调用setState来触发状态更改。调用setState后，react会再次调用render()。但是这个render()将再次执行该函数，这将调用setState并且react会再次调用render()，因此超出最大深度并崩溃

箭头函数和普通函数之间的主要区别是this范围。在箭头函数中，this引用其父对象，其中正常函数this指向自身。您可以阅读有关arrow functions

的更多信息

React Native - 通过onPress

1 个答案: