fetch 的 fileReader 阻止 React Native 道具更新

Question

我正在使用fetch api将base64照片发送给我的后端进行操作，然后将其返回。我想读这张照片，然后写给我的cameraroll，我可以做。最终目标是将照片分享到Instagram，但由于某种原因，FileReader会阻止道具更新。这是方法：

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;
            });
        });
}

照片将照片保存到相机卷中，但没有更新道具，因此Linking直到我按下屏幕上某个地方的另一个按钮才会发生。

例如，如果我导航到另一个屏幕，Instagram将使用准备共享的照片打开。我尝试更新的道具都没关系，甚至像更改屏幕上的文本一样简单：当我使用fileReader时，道具将不会更新。当我将这条线排出时，道具将更新，但是我需要它以获取图像的base64文本字符串。

另外，base64文本字符串确实保存到状态（我实际上正在使用redux），但没有任何更新。

Answer 1

不确定URI是否处于您的状态，但之前提出了类似的问题：

我的redux状态已经改变，为什么不触发重新渲染反应？

您绝对不要在redux中突变状态的任何部分。在您正在执行以下操作的文件的最顶部：

let uriParts = uri.split('.');

这正在突变您的状态，这将阻止下面在" AddeventListener"中使用URI时进行更新。

如链接中所述，尝试返回新的URI，而不是更改当前的URI并突变您的状态。

让我知道这是否有帮助！