更新电容器存储中的值
Update value inside Capacitor Storage
以下情况:
我有一个 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
需要是 added/changed 因为它的值应该由用户通过 select 表单选择,因此在第一次保存时没有定义。但是拍完照片需要保存,否则app中不会显示。
到目前为止我尝试了什么:
我的想法是添加一个空的 park
以便以后能够更新它。所以我想通过 Storage.get()
读取存储中的对象,然后将我正在 select 公园中的对象的文件路径与存储中每个对象的文件路径进行比较。匹配后,空 park
应与 selected 值交换。然后 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
函数不工作:
Property 'find' does not exist on type 'string'.ts(2339)
最后很简单...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>
);
}
}
以下情况:
我有一个 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
需要是 added/changed 因为它的值应该由用户通过 select 表单选择,因此在第一次保存时没有定义。但是拍完照片需要保存,否则app中不会显示。
到目前为止我尝试了什么:
我的想法是添加一个空的 park
以便以后能够更新它。所以我想通过 Storage.get()
读取存储中的对象,然后将我正在 select 公园中的对象的文件路径与存储中每个对象的文件路径进行比较。匹配后,空 park
应与 selected 值交换。然后 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
函数不工作:
Property 'find' does not exist on type 'string'.ts(2339)
最后很简单...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>
);
}
}