javascript - 如何强制组件在同步请求之间重新渲染？ ( react native )

Question

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

在详细介绍之前，我想先说明一下，据我所知，有两种方法可以触发重新渲染

1. 使用setState
2. 使用forceUpdate(不推荐)

这些方法都不适用于我的情况，这就是我创建这个问题的原因。

据我所知，我读到异步请求中的更新状态存在触发重新渲染的问题。因此，我尝试使用底部的递归方法 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 > 它永远不会起作用。

Answer 1

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

它将等到 setState 完成且组件重新渲染后再调用下一个文件下载函数。

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