只有在react native中单击2-3次提交按钮后，才能使用AsyncStorage存储数据

Question

我在按下按钮时调用一个函数，使用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按钮之后。但在控制台中，即使我只点击一次save按钮，我也会得到success。但当我点击get item按钮时，如果只点击一次save，我将在控制台中获得null。

我不知道为什么我必须多次单击save来存储我的数据。

Answer 1

您更新状态不正确。新状态将在下一次渲染中可用，因此应在状态更新后调用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);
}
};