我在按下按鈕時呼叫一個函式，使用AsyncStorage.
下面是我用來存盤資料的代碼 AsyncStorage
const [saveData, setSaveData] = useState([]);
const _submit = async (text, photo) => {
let newItem;
newItem = {
description: text,
imageURL: photo,
};
setSaveData(prevList => {
prevList = prevList || [];
if (prevList.length < 0) {
return newItem;
} else {
return [...prevList, newItem];
}
});
setLocalItem();
};
const setLocalItem = async () => {
AsyncStorage.setItem('test2', JSON.stringify(saveData))
.then(json => console.log('success!'))
.catch(error => console.log('error!'));
};
const getLocalItem = async () => {
try {
const jsonValue = await AsyncStorage.getItem('test2');
const list = JSON.parse(jsonValue);
console.log('list: ', list);
} catch (e) {
console.log('error: ', e);
}
};
<TouchableOpacity
onPress={() => {
_submit (text, photo);
}}>
<Text>save</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
getLocalItem();
}}>
<Text>get item</Text>
</TouchableOpacity>
我的資料正在被存盤，但只有在我save多次單擊按鈕之后。但是在控制臺中，success即使我save只單擊一次按鈕，我也會得到。但是當我點擊get item按鈕時，null如果save只點擊一次，我就會進入控制臺。
我不知道為什么我必須save多次單擊才能存盤我的資料。
uj5u.com熱心網友回復：
您正在錯誤地更新狀態。并且新狀態將在下一次渲染中可用，因此setLocalItem應在狀態更新后呼叫。
const [saveData, setSaveData] = useState([]);
// this effect updates the storage whenever `saveData` changes
useEffect(() => {
AsyncStorage.setItem('test2', JSON.stringify(saveData))
.then(json => console.log('success!'))
.catch(error => console.log('error!'));
}, [saveData])
const _submit = (text, photo) => {
const newItem = {
description: text,
imageURL: photo,
};
// no conditions are required here as the initial state is an array
setSaveData(prevList => [...prevList, newItem]);
};
const getLocalItem = async () => {
try {
const jsonValue = await AsyncStorage.getItem('test2');
const list = JSON.parse(jsonValue);
console.log('list: ', list);
} catch (e) {
console.log('error: ', e);
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/393350.html
標籤：javascript 反应 反应原生 异步等待 异步存储
上一篇：功能組件不重新渲染，甚至在useEffect依賴項中傳遞[sum]，因為它發生了變化
下一篇：返回列表