So, I was working on authentication and I wanted to store values (object) in that storage. But I tried a sample first. The problem with the code is that it is returning previously stored value. I don't know if the problem is with the useState. But I did make sure that was not the issue.
function App() {
const [user, setUser] = useState();
const storeData = async () => {
const value={
"name":"jameel",
"email":"caseyvlogger2311",
"age":"23",
}
try {
const jsonValue = JSON.stringify(value)
await AsyncStorage.setItem('@profile', jsonValue)
console.log("saved")
console.log('console after saving (original value): ' + value.name)
} catch (e) {
// saving error
}
}
const getData = async () => {
console.log('console in getData (user useState name): ' + user.name)
try {
const jsonValue = await AsyncStorage.getItem('@profile')
jsonValue != null ? setUser(JSON.parse(jsonValue)) : null;
console.log("console useState value after getting data: " + user.name)
} catch(e) {
// error reading value
}
}
return (
<Button onPress={storeData}>Save data</Button>
<Button onPress={getData}>Get data</Button>
)
}
Output when I save and then get the value immediately: Screenshot
Please let me know if there is something missing.
Because setUser
is asynchronous as well.
Thus when you do
jsonValue != null ? setUser(JSON.parse(jsonValue)) : null;
console.log("console useState value after getting data: " + user.name)
you are triggering a state change, but this hasn't been executed yet when you access user.name
, thus user
still has the same value as in the current state. If you do
console.log(jsonValue)
you probably will see the "correct" value read from the storage ...
And just as a sidenote: Misusing the ternary operator ? :
as sort of an if
in a statement is considered bad style. It's harder to read and may lead to errors on refactoring. Why not just just do
if (jsonValue != null) {
setUser(JSON.parse(jsonValue));
}
instead? Is much easier to read and the intentions of that code perfectly clear ...