Javascript 如何强制组件在同步请求之间重新呈现？（本地反应）

我的目标是提出一系列请求，在每个请求完成后，更新指示当前正在处理的步骤的文本。像这样：

在我进入细节之前，我想讨论一下，据我所知，有两种方法可以触发重新渲染

使用

setState

使用强制更新（不推荐）

这两种方法都不适用于我的情况，这就是为什么我要提出这个问题

据我所知，我读到异步请求中的更新状态与触发重新呈现有关。因此，我尝试使用下面的递归方法

processRequests

同步处理每个异步请求：

process = () => {
    this.setState( { processing: true } );

    const dir = RNFetchBlob.fs.dirs.MainBundleDir;

    const { item } = this.state;

    const requests = [
        {
            url: `${this.base_url}/${item.id}`,
            message: 'Loading model...',
            callback: function( res ) {
                return new Promise( resolve => {
                    const model_url = JSON.parse( res.data );
                    RNFetchBlob.config( {
                        path : `${dir}/model.obj`
                    } ).fetch( 'GET', model_url ).then( () => resolve() )
                } );
            }
        },
        {
            url: `${this.base_url}/${item.id}`,
            message: 'Loading texture...',
            callback: function( res ) {
                return new Promise( resolve => {
                    const texture_url = JSON.parse( res.data );
                    const split = texture_url.split( '.' );
                    const extension = split[ split.length -1 ];
                    RNFetchBlob.config( {
                        path : `${dir}/texture.${extension}`
                    } ).fetch( 'GET', texture_url ).then( () => resolve() )
                } );
            }
        }
    ];

    this.processRequests( requests );
};

requestFileAndDownload = ( url, callback ) => {
    return new Promise( resolve => {
        RNFetchBlob.fetch( 'GET', url ).then( res => {
            callback( res ).then( () => {
                resolve();
            } )
        } );
    } );
};

processRequests = requests => {
    const request = requests.shift();

    const { url, message, callback } = request;

    console.log( 'message = ', message );

    this.setState( { processing_text: message } );

    this.requestFileAndDownload( url, callback ).then( () => {
        if( requests.length ) {
            this.processRequests( requests );
        }
    } );
};

文件已成功下载，但我无法在请求之间重新渲染组件。即使状态中的文本已被更新，如我输出的控制台消息所示：

---

我尝试在许多不同的地方插入

forceUpdate

，但我发现，如果我觉得有必要尝试使用

forceUpdate

，它就永远不会起作用。

您应该尝试在processRequests调用中使用setState回调处理程序函数

在调用下一个文件下载函数之前，它将等待setState完成并重新呈现组件

this.setState( { processing_text: message }, () => {
  this.requestFileAndDownload( url, callback ).then( () => {
    if( requests.length ) {
        this.processRequests( requests );
    }
  });
});

---

您应该尝试在processRequests调用中使用setState回调处理程序函数

在调用下一个文件下载函数之前，它将等待setState完成并重新呈现组件

this.setState( { processing_text: message }, () => {
  this.requestFileAndDownload( url, callback ).then( () => {
    if( requests.length ) {
        this.processRequests( requests );
    }
  });
});

---

我刚刚意识到我犯了一个愚蠢的错误，在写下整个问题后，文本仍然被硬编码为“加载模型…”。。。事实证明，我上面的代码工作正常。知道这个很好，不过谢谢，我不知道你可以用setState来做。我刚刚意识到我犯了一个愚蠢的错误，在写下整个问题后，文本仍然硬编码为“加载模型…”。。。事实证明，我上面的代码工作正常。很高兴知道这一点，不过谢谢，我不知道你可以用setState实现这一点。