React: Используя функцию стрелки, чтобы передать опору

Question

В одном из моего компонента я использую что-то вроде:

<PhotoList update_photo={() => this.update_photo()} /> 

Здесь я передаю функцию в качестве реквизита, который обновляет фотографию в состоянии ..

и в моем списке фото компоненты у меня есть список фотографий, где я обновляемые фото как:

<div className="single-photo" onClick={() => this.props.update_photo(photo)}> 

Здесь он проходит undefined вместо фото .. Buth когда я использую его в общих чертах, как <PhotoList update_photo={this.update_photo.bind(this)} /> и <div className="single-photo" onClick={this.props.update_photo.bind(this, photo)}> Это работает

В чем разница и почему первый метод не работает?

Answer 1

Трудно сказать, не зная, как определяется this.update_photo(), но я предполагаю, что проблема заключается в том, что функция, которую вы передаете, не принимает аргументов, но вы пытаетесь передать аргумент от дочернего элемента.

Так что, возможно попробовать разводку аргумент так:

<PhotoList update_photo={(photo) => this.update_photo(photo)} /> 

Тогда this.update_photo должен быть в состоянии установить состояние на основании аргумента, переданного в него.

Answer 2

Было бы полезно узнать, как определяется метод update_photo(), но я подозреваю, что он имеет какое-то отношение к факту arrow functions don't bind their own this value. Если вы используете функцию стрелки как метод, this will be undefined.