Блог

Следующая ситуация:

У меня есть приложение Ionic React, которое я использую для фотосъемки, а затем сохраняю фотографии с информацией о принадлежности. Я беру все существующие данные (на момент съемки) и сохраняю их с помощью API для хранения конденсаторов Storage.set() . Если у меня console.log() хранилище с 2 фотографиями, оно выглядит так:

 [{"filepath":"file:///storage/emulated/0/Documents/1631810178839.jpeg","latitude":52.09244,"longitude":15.099145,"time":"9/16/2021, 4:35:49 PM","park":""},{"filepath":"file:///storage/emulated/0/Documents/1631796536758.jpeg","latitude":52.09244,"longitude":15.099145,"time":"9/16/2021, 2:48:24 PM","park":""}]
 

Фотографии отображаются в каком-то списке. Где каждый объект имеет 2 столбца. В левой колонке отображается фотография, а в правой колонке содержится дополнительная информация, такая как дата, местоположение и раскрывающийся список для парка.

Где я застрял:

Я хочу обновить значение park . park необходимо добавить/изменить после сохранения фотографии, потому что ее значение должно быть выбрано пользователем с помощью формы выбора и поэтому не определено в момент сохранения в первый раз. Но фотографию нужно сохранить после ее съемки, иначе она не будет отображаться в приложении.

Что я пробовал до сих пор:

Моя идея состояла в том, чтобы добавить пустое park , чтобы иметь возможность обновить его позже. Поэтому я хотел прочитать объекты внутри хранилища, Storage.get() а затем сравнить путь к файлу объекта, который я выбираю, с путями к файлам каждого объекта в хранилище. После совпадения пустое park значение должно быть заменено выбранным значением. А затем Storage.set() с массивом обновленного park значения.

Кодовый блок:

 class Park extends React.Component {
    constructor(props) {
      super(props);
      this.state = {park: ""};
  
      this.handleChange = this.handleChange.bind(this);
    }
  
    async handleChange(e) {
      this.setState({
        park: e.target.value
      });
      
      const {value} = await Storage.get({key: 'test' });
      var item = value.find(x => x.filepath == this.props.photoPath);

      if (item) {
        item.park = this.state.park;
      }

      Storage.set({key: 'test', value: value})
    }
  
    render() {
      return (
          <IonItem>
              <IonLabel position="stacked">Parks</IonLabel>
              <IonSelect name="park" value={this.state.park} placeholder="Choose park" onIonChange={this.handleChange}>
                  <IonSelectOption value="park1">Park1</IonSelectOption>
                  <IonSelectOption value="park2">Park2</IonSelectOption>
                  <IonSelectOption value="park3">Park3</IonSelectOption>
              </IonSelect>
          </IonItem>
      );
    }
  }

export default Park
 

FYI this.props.photoPat передается от родителя и указывает путь к файлу фотографии, принадлежащей выбранной форме.
Но это неправильно работает из-за того, как я пытаюсь извлечь данные из хранилища. Эта find функция не работает:

Свойство «найти» не существует для типа «строка». ts(2339)

В конце концов все оказалось довольно просто… find() работает только с массивами и Storage.get() возвращает строку. Таким образом, вам нужно parse() ввести строку, чтобы получить массив, а затем вы можете успешно использовать функцию find() —

   class Park extends React.Component {
    
    async handleChange(target) {

      const {value} = await Storage.get({key: 'park' });
      let array = JSON.parse(value)
      let index = array.findIndex((array) => array.filepath === this.props.photoPath)
      if(index !== -1) {
        array[index] = {
            filepath: array[index].filepath,
            park: target
          }
      } else {
          console.log("error")
      }
      Storage.set({key: 'park', value: JSON.stringify(array)})

    }
  
    render() {
      return (
        <IonItem>
          <IonLabel position="stacked">Parks</IonLabel>
          <IonSelect name="park" value={this.props.park} placeholder="Bitte wählen" onIonChange={e => this.handleChange(e.detail.value)}>
              <IonSelectOption value="park1">Park1</IonSelectOption>
              <IonSelectOption value="park2">Park2</IonSelectOption>
              <IonSelectOption value="park3">Park3</IonSelectOption>
          </IonSelect>
      </IonItem>
      );
    }
  }