Slash "/" symbol added in data list after each order - node.js

Question

im just a begineer with react native and i have this problem :
im working on a food app where you can check food items with checkbox , for each food checked it will be automatically stored in array like this :
const data = [
{
"Viande": Viande,
"Sauce": Sauce,
"Extra": Extra,
"Boisson": Boisson,
"Supplements": Supplements,
}
]
AsyncStorage.getItem("STORAGE_Data").then((datacart) => {
console.log("datacart = ", datacart)
if (datacart !== null) {
const cart = JSON.parse(datacart)
cart.push(datacart)
AsyncStorage.setItem("STORAGE_Data", JSON.stringify(cart))
console.log("cart 2:",JSON.stringify(cart))
}else{
AsyncStorage.setItem("STORAGE_Data", JSON.stringify(data))
console.log("else : " , data)
}
console.log("DATA:", JSON.stringify(data))
alert("done")
}).catch((error) => {
alert(error)
})
};
Everything works properly so far , im using asyncstorage to save all the data and get them in my Cart class where i have all the data , im using map() function to create a view for each time i add new food :
constructor(props) {
super(props);
this.state = {
dataCart: [],
};
}
componentDidMount()
{
try {
AsyncStorage.getItem('STORAGE_Data').then((cart) => {
if (cart !== null) {
const cartfood = JSON.parse(cart)
console.log(cart)
this.setState({ dataCart: cartfood })
console.log(JSON.stringify(this.state.dataCart))
}
})
}
catch (error) {
console.log(error)
}
}
and here is my map() function
{
this.state.dataCart.map((item , i) => {
return (
<View style={styles.rectangle}>
<Image style={{ width: normalize(200), height: normalize(64), alignSelf: 'center', marginLeft: normalize(-40) }} source={require("../assets/Tacos-M.png")}></Image>
<View>
<Text style={{ alignSelf: 'center', fontSize: normalize(17), marginTop: normalize(10) }} key={i}>{item.Viande}</Text>
<View style={{ flexDirection: 'row', alignSelf: 'center', marginTop: normalize(40) }}>
<TouchableOpacity onPress={() => alert('ok')}><Feather name="minus" color={'#D05A0B'} size={normalize(20)} style={styles.btnMoin} /></TouchableOpacity>
<Text style={{ fontSize: normalize(15), marginLeft: normalize(15) }}>2</Text>
<TouchableOpacity><Feather name="plus" color={'#D05A0B'} size={normalize(20)} style={styles.btnPlus} /></TouchableOpacity>
</View>
</View>
<View>
<TouchableOpacity><Feather name="x" color={'#D05A0B'} size={25} style={{ alignSelf: 'flex-start', marginTop: normalize(20), marginLeft: normalize(40), }} /></TouchableOpacity>
<Text style={{ fontSize: normalize(15), alignSelf: 'center', marginTop: normalize(27), marginLeft: normalize(35) }}>14 DT</Text>
</View>
</View>
)
})
}
So the problem is i can make a food list as a first order , but in the second order after i change the food choice my map() function doest not give food name like this :
it returns an empty text instead in the second order view
so tired console.log() to see if im getting real data or no and suddenly i figured out whenever i add another order the food list becomes like this :
the slash "/" symbol added for each order , i have no clue how but is there any solution to avoid these kind of symbols and get a clean and proper list for my data ?

Answer 1

If you look in your AsyncStorage.getItem callback, you'll see that you're doing:
cart.push(datacart)
meaning you're pushing your stringified cart onto your cart and then setting it back into AsyncStorage, when you probably want to be doing:
cart.push(data)
Edit:
Actually, you probably want to set data equal to the object rather than an array containing the object, and then change your code to either push the object to the cart array in the if statement or set the AsyncStorage with a new array containing the object like so:
const data = {
"Viande": Viande,
"Sauce": Sauce,
"Extra": Extra,
"Boisson": Boisson,
"Supplements": Supplements,
}
...
if (...) {
const cart = JSON.parse(datacart)
cart.push(datacart)
AsyncStorage.setItem("STORAGE_Data", JSON.stringify(cart))
} else {
AsyncStorage.setItem("STORAGE_Data", JSON.stringify([data]))
}