如何解决由于先前的图像正在上传到服务器，因此状态不会同时更新
我正在使用 AWS S3 存储桶将图像上传到服务器并从服务器获取响应作为图像 URL，然后我将其存储到数据库中，但由于状态未在存储先前响应的同时更新
我的代码在这里
const EditProfileScreen = ({ navigation,userdetails,adduser,imageUrl,addimage }) => {
const [isModalVisible,setModalVisible] = useState(false);
const [isChoosen,setChoosen] = useState(false);
const [isLoading,setLoading] = useState(false);
const [picture_url,setPictureUrl] = useState('');
const [availableData,setAvailableData] = useState({
name: userdetails.name,email: userdetails.email,zipcode: userdetails.zipcode,address: userdetails.address,phone: userdetails.phone,picture_url : userdetails.picture_url
})
const [selectedIMage,setSelectedimage] = useState({
imageType : imageUrl.type,imageName : imageUrl.fileName,imagePath : imageUrl.uri
})
const handleImageChange = (awsImageurl) => {
setPictureUrl(awsImageurl)
}
const handleCaptureImage = (imgDetails) => {
setSelectedimage({
imagePath : imgDetails.uri,imageName : imgDetails.fileName,imageType : imgDetails.type
})
}
const showToast = (alert) => {
ToastAndroid.showWithGravity(
alert,ToastAndroid.LONG,ToastAndroid.BOTTOM
);
};
async function uploadToS3() {
setLoading(true);
const file = {
uri: selectedIMage.imagePath,name: selectedIMage.imageName,type: selectedIMage.imageType
}
const options = {
keyPrefix: "profile_pics/",bucket: "bucket",region: "ap-south-1",accessKey: "**********",secretKey: "***********",successActionStatus: 201
}
try {
const response = await RNS3.put(file,options)
if (response.status === 201) {
console.log("Success: ",response.body);
handleImageChange(response.body.postResponse.location);
setLoading(false);
} else {
console.log("Failed to upload image to S3: ",response)
setLoading(false);
}
} catch (error) {
console.log("inside catch error",error)
setLoading(false);
}
}
const editUserDetails = async () => {
setLoading(true);
try {
let user_id = null;
let token = null;
user_id = await AsyncStorage.getItem('user_id');
token = await AsyncStorage.getItem('userToken');
const pic_url = picture_url;
var qs = require('qs');
var data = qs.stringify({
'name': availableData.name,'email': availableData.email,'zipcode': availableData.zipcode,'address': availableData.address,'phone': availableData.phone,'picture_url': pic_url
});
var config = {
method: 'patch',url: `/users/${user_id}`,headers: {
'Authorization': `Bearer ${token}`,'Content-Type': 'application/x-www-form-urlencoded'
},data: data
};
console.log("userId:",user_id);
if (user_id != null) {
axios(config)
.then((response) => {
console.log(response.data.data);
adduser(response.data.data);
setTimeout(() => {
setLoading(false)
showToast(response.data.message);
navigation.navigate('ProfileScreen');
},1000);
},(error) => {
console.log(error.response);
setLoading(false);
});
}
} catch (e) {
console.log(e);
}
}
const requestCameraPermission = async () => {
if (Platform.OS === 'android') {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,{
title: 'Camera Permission',message: 'App needs camera permission',},);
// If CAMERA Permission is granted
return granted === PermissionsAndroid.RESULTS.GRANTED;
} catch (err) {
console.warn(err);
return false;
}
} else return true;
};
const requestExternalWritePermission = async () => {
if (Platform.OS === 'android') {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,{
title: 'External Storage Write Permission',message: 'App needs write permission',);
// If WRITE_EXTERNAL_STORAGE Permission is granted
return granted === PermissionsAndroid.RESULTS.GRANTED;
} catch (err) {
console.warn(err);
alert('Write permission err',err);
}
return false;
} else return true;
};
const captureImage = async (type) => {
let options = {
mediaType: type,maxWidth: 300,maxHeight: 550,quality: 1,videoQuality: 'low',durationLimit: 30,//Video max duration in seconds
saveToPhotos: true,};
let isCameraPermitted = await requestCameraPermission();
let isStoragePermitted = await requestExternalWritePermission();
if (isCameraPermitted && isStoragePermitted) {
launchCamera(options,(response) => {
handleCaptureImage(response);
console.log('Response = ',response);
if (response.didCancel) {
let alrt = "User cancelled camera picker";
showToast(alrt);
return;
} else if (response.errorCode == 'camera_unavailable') {
let alrt = "Camera not available on device";
showToast(alrt);
return;
} else if (response.errorCode == 'permission') {
let alrt = "Permission not satisfied";
showToast(alrt);
return;
} else if (response.errorCode == 'others') {
showToast(response.errorMessage);
return;
}
console.log('base64 -> ',response.base64);
console.log('uri -> ',response.uri);
console.log('width -> ',response.width);
console.log('height -> ',response.height);
console.log('fileSize -> ',response.fileSize);
console.log('type -> ',response.type);
console.log('fileName -> ',response.fileName);
addimage(response);
if (imageUrl) {
setChoosen(true)
setModalVisible(!isModalVisible);
setTimeout(() => {
uploadToS3();
},2000);
}
else {
setChoosen(false)
}
});
}
};
const chooseFile = (type) => {
let options = {
mediaType: type,};
launchImageLibrary(options,(response) => {
console.log('Response = ',response);
handleCaptureImage(response)
if (response.didCancel) {
let alrt = "User cancelled camera picker";
showToast(alrt);
return;
} else if (response.errorCode == 'camera_unavailable') {
let alrt = 'Camera not available on device';
showToast(alrt);
return;
} else if (response.errorCode == 'permission') {
let alrt = 'Permission not satisfied';
showToast(alrt);
return;
} else if (response.errorCode == 'others') {
showToast(response.errorMessage);
return;
}
console.log('base64 -> ',response.base64);
console.log('uri -> ',response.uri);
console.log('width -> ',response.width);
console.log('height -> ',response.height);
console.log('fileSize -> ',response.fileSize);
console.log('type -> ',response.type);
console.log('fileName -> ',response.fileName);
addimage(response);
if (imageUrl) {
setChoosen(true)
setModalVisible(!isModalVisible);
setTimeout(() => {
uploadToS3();
},2000);
}
else {
setChoosen(false)
}
});
};
const mapStateToProps = (state) => {
console.log(state);
return {
userdetails: state.userReducer.userProfile,imageUrl : state.userReducer.imageUrl
}
}
const mapDispatchToProps = (dispatch) => {
console.log(dispatch)
return {
adduser: (details) => dispatch(addUser(details)),addimage: (image_url) => dispatch(addImageToUpload(image_url))
}
}
export default connect(mapStateToProps,mapDispatchToProps)(EditProfileScreen)我正在使用 redux 来存储数据并从 redux 中获取用户详细信息，我希望同时更新状态，以便将实际响应存储到数据库中，并且如果第一次上传它会抛出错误，因为它不是获取上传到 AWS s3 服务器的详细信息。 任何建议或帮助？ 提前致谢
解决方法
也许您可以将异步中间件用于 redux 作为 Redux Thunk。 然后，您将能够使您的操作分派为异步。
,我得到了解决方案 我没有将相机或照片库中捕获的数据存储到状态，而是直接将数据发送到 s3 存储桶中，并且工作正常
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
