takePic
Вы изменяете состояние в вашей takePic функции
this.state.saveImages.push(file);
this.state.storeFilePath.push(responce.path);
Это может привести к исчезновению мутаций при обновлении вашего состояния. Это может означать, что загруженные вами изображения не удаляются из-за того, что пути к ним были потеряны.
Вы должны правильно вызвать setState, взяв предыдущее значение состояния, добавив новые значения и затем обновив его.
this.setState(prevState => {
// get the previous state values for the arrays
let saveImages = prevState.saveImages;
let storeFilePath = prevState.storeFilePath;
// add the values to the arrays like before
saveImage.push(file);
storeFilePath.push(responce.path);
// return the new state
return {
saveImages,
storeFilePath
}
});
Если вы хотите проверить состояние, если вы только что установили его, вы должны , а не сделать следующее:
this.setState({capturedTime:this.state.serverTime.currentFileTime+'_'+time});
console.log(this.state.capturedTime); // <- this is not guaranteed to be correct
Вы должны использовать функцию обратного вызова, которая поставляется с setState. Вы должны обновить свой код так:
this.setState({capturedTime:this.state.serverTime.currentFileTime+'_'+time},
() => console.log(this.state.capturedTime)
);
Это обеспечит обновление state, так что ваш console.log должен показать вам правильное значение.
deleteImages
В вашей функции deleteImages вы передаете параметр storeFilePath, но не используете его, так как обращаетесь к storeFilePath напрямую из state.
deleteImages=(storeFilePath)=>{ // <- storeFilePath is not used
this.state.storeFilePath.map((path) => {
RNFetchBlob.fs.unlink(path)
.then(() => {
console.log('Delete images once after file upload is done');
});
});
}
Вы можете использовать его и переписать функцию как:
deleteImages=(storeFilePath)=>{
storeFilePath.map((path) => {
RNFetchBlob.fs.unlink(path)
.then(() => {
console.log('Delete images once after file upload is done');
});
});
}
или вы можете просто проигнорировать параметр вместе и сделать следующее:
deleteImages=()=>{
this.state.storeFilePath.map((path) => {
RNFetchBlob.fs.unlink(path)
.then(() => {
console.log('Delete images once after file upload is done');
});
});
}
1042 * делает *
Вы не должны вызывать вашу deleteImages функцию в вашем render. Вы должны использовать методы жизненного цикла компонента React.
Мы можем использовать componentDidUpdate, чтобы проверить, были ли загружены изображения, а затем позвонить
deleteImages
componentDidUpdate(prevProps, prevState) {
if (this.state.isUploaded) {
this.deleteImages(); // <- see above about refactoring this function
}
}
_upload
Я не уверен на 100%, что это правильный способ загрузки. Как и в deleteImages, вы не используете передаваемый параметр.
_upload=(saveImages)=>{
const config ={ ... }
this.state.saveImages.map((image) => {
RNS3.put(image,config)
.then((responce) => {
console.log('=============********************================');
console.log(image);
this.setState({ isUploaded: true });
});
});
Alert.alert('Successfully, saved');
}
Я думаю, что вы, вероятно, должны использовать Promise.all (кажется, больше здесь ), чтобы справиться с этим. Также this.setState({ isUploaded: true }); будет вызываться для каждого загружаемого вами изображения, вызывая повторную визуализацию и вызывая вашу функцию deleteImages, так как состояние теперь будет истинным. Примерно так может быть лучше:
_upload () => { // <- again you are not using the parameter that you are passing
const config = { ... }
Promise.all(this.state.saveImages.map(image => RNS3.put(image, config))).then(values => {
this.setState({isUploaded: true});
alert('Successfully, saved);
// though why delete images on a state change, why not delete them here now that the upload has completed?
})
}
Вот несколько замечательных статей по setState.