React Native - передача строк или переменных через onPress

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 prop.Это никогда не происходит (Почему?: Объяснено ниже)

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

Примечание: функция вызывается при создании объекта Button.

, тогда как другие строки присваивают функцию onPressprop

const Button = {
   onPress: this. filterOfficeTypePitt
}

или

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

Примечание: функция не называется созданием объекта Button, а когда кто-то нажимает эту кнопку

And Why Line3 вызывает сбой приложения, потому что он вызывает изменение состояния, вызывая setState.Когда вызывается setState, реагировать вызовет render() снова.Но этот render() снова выполнит функцию, и это вызовет setState, а реакция снова вызовет render() и, таким образом, будет превышена максимальная глубина и произойдет сбой

Основное различие между функциями стрелки и обычными функциями заключается в том, чтоthis объем.В стрелочных функциях this относится к своему родительскому объекту, где, как и в обычной функции, this относится к себе.Вы можете узнать больше о функциях стрелок