Как с помощью одной функции обновлять несколько значений state?

Question

[dim5on]

У меня есть такой state:

state = {
    photos : {
      driverPhoto : null,
      passportPhoto : null,
      driverLicensePhoto: null,
    },
  };

Есть функция, которая вызывает camera roll и устанавливает в state выбранную картинку:

useLibraryHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3]
    });
    this.setState({ photos : { ...this.state.photos, driverPhoto : result.uri } });
  };

Вот элемент, который вызывает функцию:

<TouchableHighlight onPress={this.useLibraryHandler}></TouchableHighlight>

Как переписать функцию, чтобы её можно было вызывать к примеру вот так?
Чтобы функцию можно было использовать в разных местах и обновлять разные элементы state.

<TouchableHighlight onPress={this.useLibraryHandler('driverPhoto')}></TouchableHighlight>

Comments

[Роман Александрович]

useLibraryHandler =(type)=> async () => { // в type  попадет ваш driverPhoto
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3]
    });
    this.setState({ photos : { ...this.state.photos, driverPhoto : result.uri } });
  };

[dim5on]

Роман Александрович,
Извините может неправильно задал вопрос, я делаю форму регистрации и у меня на экране 3 элемента для загрузки фотографий.
И я хочу вызывать их для разных свойств state вот так:

<TouchableHighlight  onPress={this.useLibraryHandler('driverPhoto')}>
       <TouchableHighlight  onPress={this.useLibraryHandler('passportPhoto')}>
       <TouchableHighlight  onPress={this.useLibraryHandler('driverLicensePhoto')}>

[Роман Александрович]

dim5on,

useLibraryHandler =(type)=> async () => { // в type  попадет ваш driverPhoto
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3]
    });
    this.setState({[type]:{ photos : { ...this.state.photos, driverPhoto : result.uri } }});
  };

Answer 1

[AlexKeller]

Так и передайте отдельным пропсом имя конкретного элемента:

<TouchableHighlight onPress={this.useLibraryHandler} photoType="driverPhoto" />

Никаких замыканий не нужно будет, просто читаем переданную строку.

let newPhotos = {...this.state.photos};
newPhotos[this.props.photoType] = result.uri;
this.setState({ photos : newPhotos });

Comments

[dim5on]

AlexKeller Извините но так не работает в обоих случаях:

useLibraryHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3]
    });
    let newPhotos = {...this.state.photos};
    newPhotos[this.props.photoType] = result.uri;
    this.setState({ photos : newPhotos });
  };

useLibraryHandler = (photoType) => async () => {
  .....
  };

[AlexKeller]

dim5on, хм, странно, нужно значит поставить точку остановки, глянуть что приходит и по шагам пройтись. Просто если TouchableHighlight это какой-то стандартный (библиотечный) компонент, то может и нельзя будет прокидывать ничего лишнего, а если ваш - то тут только подебажить