Список BLOB-объектов не обновляется в компоненте реагировать js

Question

У меня есть два компонента,

1. Компонент загрузчика
   • , который загружает файл в Azure хранилище
2. ContainerList Component
   • Который извлекает данные загруженного файла из Azure хранилища.

Для извлечения данных из azure и отображения в ContainerList я ссылался на ListBlobs в (https://dmrelease.blob.core.windows.net/azurestoragejssample/samples/sample-blob.html)

Мои компоненты являются полностью независимыми компонентами, которые были импортированы в другой проект реакции с использованием ссылки npm. Для ссылки npm я ссылался на эту документацию (https://60devs.com/simple-way-to-manage-local-node-module-using-npm-link.html)

import {Uploader, ContainerList} from 'blobuploader';
import React from 'react';

class App extends React.Component{

      render(){
            return (
               <Uploader
                        accountName={azureCredentials.accountName} 
                        sasToken={azureCredentials.sasToken} 
                        multiple={true}/>

               <ContainerList 
                        accountName={azureCredentials.accountName} 
                        sasToken={azureCredentials.sasToken} />
             );
      }
}

Основная проблема заключается в том, когда я загружал файлы в Azure хранилище с помощью компонента Uploader. Список контейнеров не обновляется, т. Е. Вновь загруженный файл в azure хранилище не отображается в ContainerList. Необходимо перезагрузить страницу для просмотра обновленных данных в ContainerList.

Например, под изображением вы можете видеть, где новый файл был загружен, но не отображается в списке (то есть ContainerList)

Пожалуйста, помогите мне решить эту проблему. Заранее спасибо

код контейнера ContainerList

import React from 'react';
import '../css/containerList.css';
import axios from 'axios';
import PROGRESS from '../assets/progress.svg'
import PropTypes from 'prop-types';


class ContainerList extends React.Component{
    constructor(props){
        super(props);
        this.state= {
            datas: [],

         };
        this.blobService = null;
        this.initConnections.bind(this);
    }

    componentDidMount(){
        const script = document.createElement('script');
        script.src = "https://dmrelease.blob.core.windows.net/azurestoragejssample/bundle/azure-storage.blob.js";
        script.async = true;
        document.body.appendChild(script);
        script.onload = () => {
            this.initConnections();
        };
        console.log('script ended');
    }

    initConnections = () => {
        var accountName = this.props.accountName;
        var SasToken = this.props.sasToken;
        var blobUri = 'https://' + accountName + '.blob.core.windows.net';
        this.blobService = this.blobService === null ? AzureStorage.Blob.createBlobServiceWithSas(blobUri, SasToken) : this.blobService;
        this.blobService.getServiceProperties({options: ['clientRequestId']}, (error, result)=>{
            if(error){
                console.log('Error Creating Blob Service..')
                console.log(error);
            } else {
                this.blobService.listBlobsSegmented('my-con', null, {include:["metadata"]},  (error, results) => {
                 if (error) {
                        console.log(error);
                    } 
                else {
                        var temp =[]

                        results.entries.map(async (ele,index) => {
                            console.log('Tag',ele);
                            var val = index+1;
                            var type = ele.contentSettings.contentType;

temp.push({number:val,name:ele.name,type,status:<button className='container-button'>PASS</button>,email:"testtagcheck123456@gmail.com",apiStatus:PROGRESS});
                                if(results.entries.length === temp.length){
                                    this.setState({datas:temp});
                                }

                        });


                    }
                });
            }
        });
    }


    render(){


//SHOWING DATA IN UI LIST FROM this.state.datas
        return (

            <div className= "table-box">
            <div className="table-row-head">
                 {  
                        (["No","File-Name","Type","Status","Outlook-Mail","API-Status"]).map((ele => {
                            return( ele === "No" ?<div className="table-cell table-head first-cell" style={{width:'4%'}}>
                            <p className ="heading-label">{ ele} </p>
                        </div> : <div className="table-cell table-head" style={{width:'20%'}}>
                            <p className="heading-label">{ ele} </p>
                        </div>)
                        })) 


                 }
            </div>
                { 
                    this.state.datas.map( (eles,index) => {

                       return (
                        <div className='table-row' key={index}>   
                        <div className="table-cell first-cell" style={{width:'4%'}}>
                            <p>{ eles.number} </p>
                        </div>

                        <div className="table-cell" style={{width:'23%'}} >
                            <p>{eles.name} </p>
                        </div>

                        <div className="table-cell"  style={{width:'20%'}} >
                            <p >{eles.type} </p>
                        </div>

                        <div className="table-cell" style={{width:'15%'}} >
                            <p>{eles.status} </p>
                        </div>

                        <div className="table-cell"  style={{width:'23%'}}>
                            <p>{eles.email} </p>
                        </div>

                        <div className="table-cell"  style={{width:'15%'}}>
                            <img src={eles.apiStatus} alt="PROGRESS" style={{width:'30%',}}/>
                        </div>

                        </div>
                    );

                    }

                    )

                }


        </div>


        );
    }


}

ContainerList.propTypes = {
    accountName: PropTypes.string,
    sasToken: PropTypes.string,
  }
export default ContainerList;