react-native - fetch 的 fileReader 阻止 React Native Prop 更新

Question

我正在使用 fetch API 将 base64 照片发送到我的后端进行操作，然后我将其返回。我想阅读照片并将其写入我的 cameraRoll，我可以这样做。最终目标是将照片分享到 instagram，但由于某种原因，fileReader 会阻止 Prop 更新。这是方法:

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

照片保存到相机胶卷，但 Prop 没有更新，所以 Linking直到我按下屏幕上某处的另一个按钮才会发生。

例如，如果我导航到另一个屏幕，Instagram 将打开并准备好分享照片。我尝试更新什么 Prop 并不重要，即使是像更改屏幕上的文本这样简单的事情:当我使用 fileReader 时， Prop 不会更新。当我取出那条线时， Prop 会更新，但我需要它来获取图像的 base64 文本字符串。

此外，base64 文本字符串确实保存到状态(我实际上使用的是 Redux)，但没有任何更新。

Answer 1

不确定 uri 是否在您的状态下，但之前有人问过类似的问题:

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

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

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

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

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

让我知道这是否有帮助!