(React Native) Polyline Maps + AsyncStorage | Attempted to assign to readonly property - properties

Question

so I'm trying to: when a button is called, it does a setInterval that every minute saves the latitude and longitude, so I can build a polyline that conennects them.
When the button title is "Iniciar" (start) it does what I said and then the title changes to "Concluir", when the title is "Concluir" (finish) it saves the coords with AsyncStorage.
Here is some of the code with a few comments (I removed the part when it gets and updates the coords becouse it's working just fine)
export default class geolocation extends Component {
constructor(props) {
super(props);
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
kind: '',
},
markerPosition: { //marker where I am right now
latitude: 0,
longitude: 0,
kind: '',
},
refreshIntervalId: null, //so I can cancel the setInterval
markers: [], //here it's all the markers that I'll get from the setInterval
titleButtonStartFinish: 'Iniciar', //so I can change the title to see if i'm starting or finishing
};
AsyncStorage.getItem('markers').then((value) => { //so I can get the markers I saved in Async
if (value) {
const s = JSON.parse(value);
this.setState({ markers: s });
}
});
this.ButtonStartFinishOnPress = this.ButtonStartFinishOnPress.bind(this);
}
async ButtonStartFinishOnPress() {
let s = this.state;
if (s.titleButtonStartFinish === 'Iniciar') {
s.titleButtonStartFinish = 'Concluir';
s.markers = [];
s.refreshIntervalId = setInterval(() => {
s.markers.push(this.state.markerPosition);
}, 60000);
this.setState(s);
}
else if (s.titleButtonStartFinish === 'Concluir') {
s.titleButtonStartFinish = 'Iniciar';
clearInterval(s.refreshIntervalId);
console.log(JSON.stringify(s.markers));
if (s.markers) {
const x = JSON.stringify(s.markers);
await AsyncStorage.setItem('markers', x);
}
this.setState(s);
}
}
render() {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
region={this.state.initialPosition}
>
<Polyline // the polyline connecting all the markers
coordinates={this.state.markers}
strokeColor="#B24112"
strokeWidth={4}
/>
<Marker coordinate={this.state.markerPosition}> //showing the marker where i am right now
<View style={styles.radius}>
<View style={styles.marker} />
</View>
</Marker>
{this.state.markers.map((marker) => ( //showing where all the markers are
<Marker coordinate={marker} />
))}
</MapView>
<ButtonStartFinish
title={this.state.titleButtonStartFinish}
onPress={() => this.ButtonStartFinishOnPress()}
/>
</View>
);
}
}
Everything seems to be working just fine, until I add the Polyline thing.
It get the coords, it builds the polyline, then I can close the app and open again and the coords and the polyline comes back (becouse I saved them in the AsyncStorage), BUT when I do that and then i hit the start button again, it was supposed to delete the coords in "this.state.markers" and start saving new coords in the setInterval.. but it doesn't, that's when this error happens. click here to see the error

Answer 1

Got it!
This bug can happen when you are trying to make an array.push in a string instead of an array object, when you make your pushing in the same array into the the object more then once, or when you are not using the setState correctly.
In my case, I just needed to save the markers array in another const;
then JSON.parse(the backup const);
then the markers array = [];
then i use the .forEach function in the backup const, like
backup.forEach((marker) => { this.state.markers.push(markers)});
That's the way I found so my code won't try to push an array to a string
I tried to JSON.parse(markers array) and JSON.parse(the marker I want to push) but that wasn't enought