React native 获取';s文件读取器阻止本机道具更新
我正在使用FetchAPI将base64照片发送到后端进行处理,然后返回它。我想读这张照片,然后把它写到我的相机上,我可以做到。最终目标是将照片分享给instagram,但出于某种原因,文件阅读器会阻止道具更新。方法如下:React native 获取';s文件读取器阻止本机道具更新,react-native,blob,filereader,fetch-api,React Native,Blob,Filereader,Fetch Api,我正在使用FetchAPI将base64照片发送到后端进行处理,然后返回它。我想读这张照片,然后把它写到我的相机上,我可以做到。最终目标是将照片分享给instagram,但出于某种原因,文件阅读器会阻止道具更新。方法如下: uploadImageAsync = async (uri, setImageText) => { let apiUrl = "some url" let uriParts = uri.split('.'); let fileType = ur
uploadImageAsync = async (uri, setImageText) => {
let apiUrl = "some url"
let uriParts = uri.split('.');
let fileType = uri[uri.length - 1];
let formData = new FormData();
formData.append('photo', {
uri,
name: `photo`,
type: `image/${fileType}`,
});
let options = {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data',
},
};
return fetch(apiUrl, options)
.then(response => {
return response.blob();
})
.then( async myBlob => {
const fileReader = new FileReader();
fileReader.readAsText(myBlob);
const objectURL = URL.createObjectURL(myBlob);
fileReader.addEventListener('loadend', async (e) => {
const text = e.srcElement.result;
this.props.setImageText(text);
let source = { uri: 'data:image/jpeg;base64,' + text };
const cameraRollAddress = await CameraRoll.saveToCameraRoll(source.uri, 'photo');
let instagramURL = `instagram://library?AssetPath=${cameraRollAddress}`;
Linking.openURL(instagramURL);
return;
});
});
}
照片会保存到相机卷中,但道具不会更新,因此在我按下屏幕上的另一个按钮之前,链接不会发生
例如,如果我导航到另一个屏幕,Instagram将打开并准备好共享照片。我尝试更新哪些道具并不重要,即使是像更改屏幕上的文本这样简单的事情:当我使用文件阅读器时,道具也不会更新。当我取出那行时,道具将更新,但我需要它来获取图像的base64文本字符串
此外,base64文本字符串确实保存到状态(我实际上使用的是Redux),但没有更新任何内容 不确定uri是否处于您的状态,但之前曾问过类似的问题:
你不应该在Redux中改变你所在州的任何部分。
在文件的最顶端,您正在执行以下操作:
let uriParts = uri.split('.');
这会改变您的状态,当您在“addEventListener”中使用下面的uri时,它将无法更新
如链接中所述,尝试返回一个新的uri,而不是更改当前uri并改变您的状态
让我知道这是否有帮助 我不确定你是否已经解决了这个问题,但你的道具是什么,你在哪里引用它们?还有,当你说“当我去掉那行时,道具会更新”,你说的是哪一行文件阅读器?沙内格:我还没有解决这个问题。所涉及的道具位于此行this.props.setImageText(text)
;但是,除了将base64字符串保存到redux中的状态存储中之外,这些道具在这个函数中没有做任何事情。我实际上可以把这条线去掉,现在它对任何事情都没有影响。另外,我指的是fileReader.addEventListener
方法。需要读取blob,但它会以某种方式阻塞。我可以看到状态更新为this.props.setImageText(text)代码>,但它不会重新渲染,也不会响应链接
。您的uri是redux道具的一部分吗?谢谢,但是uri
不在状态。没问题。值得一试