Javascript 为什么该react组件不在状态更改后重新检查呈现中的if语句？

我正在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>
        )
    }
}

导出默认类ShowSplitPdf扩展组件{
建造师（道具）{
超级（道具）；
这个州={
加载：对，
imgsrc:[]
}
}
pdfConversion=（）=>{
if（window.PDFJS）{
console.log（this.state）；
让URL=this.state.url；
对于（var i=0；i{
var=这个；
getDocument（item）.then（函数getPdfHelloWorld（pdf）{
//
//取第一页
log（'url为：'，项）；
然后（函数getPageHelloWorld（第页）{
var标度=0.5；
var viewport=page.getViewport（比例）；
设cref='canvas'+索引；
让imgref='img'+索引；
console.log（'cref no:'，cref）；
console.log（'img no:'，imgref）；
//使用PDF页面维度准备画布
//
var canvas=that.canvasRefs[cref]；
//设imagez=that.imageRefs[imgref]；
var context=canvas.getContext（'2d'）；
context.globalcompositeoperation='source over'；
//context.fillStyle=“#fff”；
//在整个画布上绘制
//context.fillRect（0,0，canvas.width，canvas.height）；
canvas.height=viewport.height；
canvas.width=viewport.width；
//imagez.src=canvas.toDataURL（“image/png”）；
//
//将PDF页面呈现到画布上下文中
//
//render（{canvasContext:context，viewport:viewport}）；
var task=page.render（{canvasContext:context，viewport:viewport}）
task.promise.then（function（）{
//log（canvas.toDataURL（'image/png'）；
让imgItem={imgref:canvas.toDataURL（'image/png'）}
让newState=that.state.imgsrc.concat（imgItem）；
那是一个州({
imgsrc:newState
});
//imagez.src=canvas.toDataURL（'image/png'）
});
});
});
}
componentDidMount（）{
var formData=new formData（）；
append（“filepath”，this.props.item.pdfname）；
让editUrl=devull+'trip/getpdfSplitViewtripdoc？json=true'；
//this.setState（{showSplitFiles:true，load:true}）；
var=这个；
获取（editUrl{
方法：“张贴”，
凭证：'include'，
正文：formData
}).然后（功能（响应）{
返回response.json（）；
}).then（功能（数据）{
让URL=[]；
对于（var i=0；iconsole.log（err））；
}
render（）{
让canvasDiv=[]；
if（this.state.url&&this.state.url.length>0）{
this.state.url.map（（项，索引）=>{
让canv=this.canvasRefs[`canvas${index}`]=ref}>；
拉票推动（canv）；
});
}
if（this.state.imgsrc.length>0）{
this.state.imgsrc.map（（项，索引）=>{
console.log（'项为：'，项）；
});
}
返回(
在此处显示pdf图像
{this.state.loading？：''}
{canvasDiv.length>0？canvasDiv:'}
{canvasDiv.length>0？this.pdfConversion（）：''}
)
}
}

看起来像是

。\u isMounted

是

未定义的

，当您从后端收到响应时，您不会更改状态。您应该使用如下回调来管理此变量：

componentDidMount() { 
  this._isMounted = true;
}

componentWillUnmount() {
  this._isMounted = false;
}

---

在更改状态之前，请尝试添加一个

控制台.log

。

在您的代码中没有状态变量

URL

，您正试图在

渲染
和
componentDidMount
中访问它。我正在componentDidMount中设置它。它在那里，但您没有在构造函数中初始化它。我已经完成了在之前，它没有什么不同。不管怎样。让我试着在那里初始化它。不。那也没用