Update value inside Capacitor Storage

Question

以下情况:

我有一个Ionic React应用程序，我用它来拍照，然后用它的所属信息保存照片。我采取所有现有数据(在拍照时)并将其保存为电容器存储APIStorage.set()。如果我用2张照片console.log()存储，它看起来像这样:

[{"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需要在保存照片后添加/更改，因为它的值应该由用户通过选择表单选择，因此在第一次保存时没有定义。但拍照后需要保存，否则app中不会显示。

我的想法是添加一个空的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是从父元素传递过来的，它给出了属于select表单的照片的文件路径。
但是由于我试图从存储中获取数据的方式，这不能正常运行。find功能不工作:

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

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