更新电容存储内的值答案

【问题标题】：Update value inside Capacitor Storage更新电容存储内的值
【发布时间】：2021-11-11 16:30:04
【问题描述】：

以下情况：

我有一个 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

仅供参考 this.props.photoPat 从父级传递，并提供属于选择表单的照片的文件路径。
但这并不能正常运行，因为我尝试从存储中获取数据的方式。 find 函数不起作用：

类型'string'.ts(2339) 上不存在属性'find'

【问题讨论】：

标签： javascript reactjs typescript ionic-framework capacitor

【解决方案1】：

最后它非常简单...find() 只在数组上工作，Storage.get() 返回一个字符串。所以你必须parse()字符串来获取一个数组，然后你可以成功使用find()-function

  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>
      );
    }
  }

【讨论】：