fetch 的 fileReader 阻止 React Native 道具更新答案

【问题标题】：fetch's fileReader blocks React Native props from updatingfetch 的 fileReader 阻止 React Native 道具更新
【发布时间】：2018-05-13 11:06:10
【问题描述】：

我正在使用 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），但没有任何更新。

【问题讨论】：

我不确定你是否已经解决了这个问题，但你的道具是什么，你在哪里引用它们？另外，当您说“当我取出那条线时，道具会更新”，您在说哪一行 fileReader？
ShaneG：我还没有解决这个问题。涉及的道具在这一行this.props.setImageText(text)；但是，除了将 base64 字符串保存到 redux 中的状态存储之外，这些道具在此函数中没有做任何事情。我实际上可以把这条线拿出来，它目前不会影响任何事情。另外，我指的是fileReader.addEventListener 方法。它需要读取 blob，但它以某种方式阻塞了 React。我可以看到状态更新为this.props.setImageText(text);，但它不会重新渲染或响应Linking。
你的 uri 是你的 redux 道具的一部分吗？

标签： react-native blob filereader fetch-api

【解决方案1】：

不确定 uri 是否处于您的状态，但之前有人问过类似的问题：

My Redux state has changed, why doesn't React trigger a re-render?

你不应该在 Redux 中改变你的状态的任何部分。在文件的最顶部，您正在执行以下操作：

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

这会改变你的状态，当你在“addEventListener”中使用下面的uri时，它会阻止它更新。

如链接中所述，尝试返回一个新的 uri，而不是更改当前的 uri 并改变你的状态。

如果这有帮助，请告诉我！

【讨论】：

谢谢，但uri 不在该状态。
没问题。值得一试