Почему этот реагирующий компонент не перепроверяет оператор if в render, т.е. после изменения состояния? - PullRequest
Новая
       35

Почему этот реагирующий компонент не перепроверяет оператор if в render, т.е. после изменения состояния?

0 голосов
/ 06 июня 2018

Я делаю запрос на выборку в componentDidMount и использую его для изменения состояния URL.проблема заключается в том, что он не перепроверяет условие, заданное внутри рендера, после изменения состояния.почему это происходит?в основном, после изменения состояния я хочу динамически создавать холсты на основе данных в URL-адресах, а затем использовать холст для преобразования pdf в изображение.

вот компонент реакции 

export default class ShowSplitPdf extends Component{
    constructor(props){
        super(props);
        this.state={
            loading:true,
            imgsrc : []
        }
    }

    pdfConversion = ()=>{
        if(window.PDFJS){
            console.log(this.state);
            let urls = this.state.urls;
            for(var i = 0;i<urls.length;i++){
                let newurl = urls[i];
                //let newurl = 'http://172.104.60.70/st_old/uploads/defaultdocs/7/split/1527165241-42557/1_1527165241-42557.pdf';

               this.pdfLoop(newurl,i);
            }

            }
    }

    pdfLoop = (item,index) => {
        var that = this;
        PDFJS.getDocument(item).then(function getPdfHelloWorld(pdf) {
             //
             // Fetch the first page
             console.log('url is : ',item);
             pdf.getPage(1).then(function getPageHelloWorld(page) {
               var scale = 0.5;
               var viewport = page.getViewport(scale);


                   let cref = 'canvas'+index;
                   let imgref ='img'+index;
                   console.log('cref no : ',cref);
                   console.log('img no : ',imgref);

                   // Prepare canvas using PDF page dimensions
                   //
                   var canvas = that.canvasRefs[cref];
                   //let imagez = that.imageRefs[imgref];
                   var context = canvas.getContext('2d');
                   context.globalcompositeoperation = 'source-over';
                  // context.fillStyle = "#fff";
                  //draw on entire canvas
                  //context.fillRect( 0, 0, canvas.width, canvas.height );
                   canvas.height = viewport.height;
                   canvas.width = viewport.width;

                    //imagez.src = canvas.toDataURL("image/png");
                   //
                   // Render PDF page into canvas context
                   //
                   //page.render({canvasContext: context, viewport: viewport});
                   var task = page.render({canvasContext: context, viewport: viewport})
              task.promise.then(function(){
                //console.log(canvas.toDataURL('image/png'));
                let imgItem = {imgref:canvas.toDataURL('image/png')}
                let newState = that.state.imgsrc.concat(imgItem);
                that.setState({
                    imgsrc:newState
                });
                //imagez.src = canvas.toDataURL('image/png')
              });

             });
           });
       }


    componentDidMount(){
        var formData = new FormData();
        formData.append("filepath",this.props.item.pdfname); 
        let editUrl = devUrl+'trip/getpdfSplitViewtripdoc?json=true';
        //this.setState({showSplitFiles:true,loading:true});
        var that = this;
        fetch(editUrl, {
          method: "post" ,
          credentials:'include',
          body:formData
        }).then(function(response) {

          return response.json();
        }).then(function(data) {
            let urls = [];
            for(var i = 0;i<data.files.length;i++){
                let fileurl = pdfUrl+'split/'+data.dir+'/'+data.files[i];
                urls.push(fileurl);
            }
            if(that._isMounted){
                that.setState({
                    //splitpdfData:data,
                    urls
                });
            }
        }).catch((err)=>console.log(err)); 
    }

    render(){
        let canvasDiv = [];
        if(this.state.urls && this.state.urls.length>0){
            this.state.urls.map((item,index)=>{
              let canv =  <canvas key={index} style={{display:'none'}} ref={(ref) => this.canvasRefs[`canvas${index}`] = ref} > </canvas>;
              canvasDiv.push(canv);
            });
        }
        if(this.state.imgsrc.length>0){
            this.state.imgsrc.map((item,index)=>{
                console.log('item is : ',item);
            });
        }
        return(
            <div>
            show pdf images here
            {this.state.loading?<Spin style={{width:'100%',margin:"0 auto"}} tip="Loading Pdf..."/>:''}
            {canvasDiv.length>0?canvasDiv:''}
            {canvasDiv.length>0?this.pdfConversion():''}
                </div>
        )
    }
}

1 Ответ

0 голосов
/ 06 июня 2018

Похоже, that._isMounted - это undefined, и вы не меняете состояние, когда получаете ответ от своего бэкэнда.Вы должны управлять этой переменной, используя такие обратные вызовы: 

componentDidMount() { 
  this._isMounted = true;
}

componentWillUnmount() {
  this._isMounted = false;
}

Попробуйте добавить console.log перед изменением состояния.

...