I generated a “double” cascading dropdown to choose values from and everything works well, the values get saved as they should and are also displayed as they should, but as soon as I refresh (which needs to happen automatically) the 2nd and 3rd value just disappear (but are still there inside the storage).
Inside the cascading dropdowns I save every chosen value to the storage and afterwards the next can be picked. And I just don´t know why it is not showing the values, because they are saved and with other values it is working fine…
In other dropdowns I just access the data via the value inside the IonSelect like this value={this.props.photoObject.id}, but it is just working until it refreshes…
The object holding all the values is sent to the dorpdown component to access it like this:
<Select photoObject={photo} />
The Select Component is right here:
class Select extends React.Component {
constructor() {
super();
this.state = {
DDL1: [],
DDL2: [],
DDL3: [],
selectDDL1:"",
selectDDL2:"",
selectDDL3:"",
};
};
componentDidMount() {
this.setState({
DDL1: parkData
});
};
async handleChangeDDL1(target) {
console.log("DDL1:",target);
this.setState({selectDDL1: target});
this.setState({DDL2: this.state.DDL1.find(x => x.bezirk === target).DDL2});
const {value} = await Storage.get({key: PHOTO_STORAGE });
let array = JSON.parse(value);
let index = array.findIndex((array) => array.filepath === this.props.photoObject.filepath);
if(index !== -1) {
array[index] = {
time: array[index].time,
part: target,
park: array[index].park,
id: array[index].id,
}
} else {
console.log("error");
};
await Storage.set({key: PHOTO_STORAGE, value: JSON.stringify(array)})
}
async handleChangeDDL2(target) {
console.log("DDL2:",target);
this.setState({selectDDL2: target});
this.setState({DDL3: this.state.DDL2.find(x => x.objekt === target).DDL3});
const {value} = await Storage.get({key: PHOTO_STORAGE });
let array = JSON.parse(value);
let index = array.findIndex((array) => array.filepath === this.props.photoObject.filepath);
if(index !== -1) {
array[index] = {
time: array[index].time,
part: array[index].part,
park: target,
id: array[index].id,
}
} else {
console.log("error");
};
await Storage.set({key: PHOTO_STORAGE, value: JSON.stringify(array)});
}
async handleChangeDDL3(target) {
console.log("DDL3:",target);
this.setState({selectDDL3: target});
const {value} = await Storage.get({key: PHOTO_STORAGE });
let array = JSON.parse(value);
let index = array.findIndex((array) => array.filepath === this.props.photoObject.filepath);
if(index !== -1) {
array[index] = {
time: array[index].time,
part: array[index].part,
park: array[index].park,
id: target,
}
} else {
console.log("error");
};
await Storage.set({key: PHOTO_STORAGE, value: JSON.stringify(array)});
}
render() {
return (
<div>
<IonItem>
<IonLabel position="stacked">City</IonLabel>
<IonSelect name="part" placeholder="Bitte wählen" value={this.props.photoObject.part} onIonChange={e => this.handleChangeDDL1(e.detail.value)}>
{this.state.DDL1.map((x, index) => {
return <IonSelectOption value={x.bezirk} key={index}>{x.ortsteil}</IonSelectOption>
})}
</IonSelect>
</IonItem>
<IonItem>
<IonLabel position="stacked">Park</IonLabel>
<IonSelect name="park" placeholder="Bitte wählen" value={this.props.photoObject.park} onIonChange={e => this.handleChangeDDL2(e.detail.value)}>
{this.state.DDL2.map((x, index) => {
return <IonSelectOption value={x.objekt} key={index}>{x.park}</IonSelectOption>
})}
</IonSelect>
</IonItem>
<IonItem>
<IonLabel position="stacked">ID</IonLabel>
<IonSelect name="id" placeholder="Bitte wählen" value={this.props.photoObject.id} onIonChange={e => this.handleChangeDDL3(e.detail.value)}>
{this.state.DDL3.map((x, index) => {
return <IonSelectOption value={x} key={index}>{x}</IonSelectOption>
})}
</IonSelect>
</IonItem>
</div>
);
}
}
The data to be displayed inside the cascading dropdowns comes from a external file with an array:
export let parkData = [
{
ortsteil: "city1",
bezirk: "01",
DDL2: [
{
park: "park12",
objekt: "0112",
DDL3: [1,2,3,4,5,6,7],
}
],
},
{
ortsteil: "city2",
bezirk: "22",
DDL2: [
{
park: "park07",
objekt: "2207",
DDL3: [1,2,3,4,5,6,7,8,9],
}
]
},
]