添加对象到数组，并将数组保存到异步存储react native

Question

我正在下载一些文件并将它们的数据保存到本地存储以供react native使用。下载工作得很好，但我试图将对象数据保存到一个数组，并将数组存储在本地存储。当我试图保存项目时，问题就出现了。我必须点击两次下载按钮来保存项目，否则数组在本地存储上保持空并且不更新。

const [value, setValue] = useState(0);
const [initialElements, setinitialElements] = useState([]);
const [videoid, setvideoid] = useState(0);

//Downloading Video file
const downloadVideo = async () => {
RNFetchBlob.config({
fileCache: true,
appendExt: 'mp4',
}).fetch(
'GET',
'https://cdn.videvo.net/videvo_files/video/premium/getty_105/large_watermarked/istock-1083459308_preview'
).progress((received, total) => setValue(Math.round((received / total) * 100)).then(res => {
setvideopath(res.path());
console.log('Video Complete');
addElement();
});
};
const addElement = async () => {
let ItemData = {
itemKey: videoid,
itemName: 'Object ' + (videoid+ 1),
image: imgpath,
video: videopath,
};

//Pushing new object into array
var newArray = [...initialElements, ItemData];
setvideoid(videoid+ 1);
setinitialElements(newArray);
try {
await AsyncStorage.setItem('cachedvideos', JSON.stringify(initialElements));
} catch (error) {
// Error saving data
}
};

return (
<View>
<Button title="Download" onPress={downloadVideo}/>
<View style={{
alignItems: 'center',
marginTop: 25,
}}>
<AnimatedCircularProgress
size={25}
width={4}
fill={value}
tintColor="#00e0ff"
backgroundColor="#3d5875"
/>
</View>
</View>
);

我只需要用新对象更新本地存储上的数组，以便在另一个屏幕中使用。

Answer 1

我认为这是由于你的代码中的一个小错误:

var newArray = [...initialElements, ItemData];
setvideoid(videoid+ 1);
setinitialElements(newArray);
try {
await AsyncStorage.setItem(
'cachedvideos',
JSON.stringify(initialElements), <-- change to newArray
);
} catch (error) {
// Error saving data
}

您将initialElements保存到本地存储，这是以前的值，而不是更新后的值。这就是为什么你需要下载视频两次:第二次initialElements将等于newArray在前一次下载。

我还建议您更新itemName字段:

const addElement = async () => {
let ItemData = {
itemKey: videoid,
itemName: 'Object ' + (videoid+ 1), <-- remove the + 1
image: imgpath,
video: videopath,
};

否则，itemName将指示此特定项对应于键videoid + 1，但事实并非如此。