0

我正在 reactjs 中开发一个用于生成 pdf 的组件，其中包含仪器的信息。仪器的每个项目都应该有它自己的数据矩阵 GS1。问题是当我尝试生成 pdf 时，它会出现错误，并且页面开始在发送网络错误之前加载非常缓慢。

下面是组件的代码，setDataMatrix 将数据发送到后端，为每个项目生成 DataMatrix 代码，并将其显示为表格行内的图像。出于这个原因，我正在映射包含信息的表并为每个项目调用函数 setDatamatrix。

const [udi,setUdi]=useState([]);
const setDataMatrix=(infosInstru)=>{
Service.getCodeBar(infosInstru).then(res=>{
    setUdi(res.config.url)
}).catch(err=>alert(err))

}

                                <table style={{fontSize:"8px",padding:'30px', width:'100%'}} className="table table-bordered">
                                <tbody>                                                                                                                                                                                                                             
                                    {
                                        tab.map(t=>{
                                            //generate DataMatrix for every item
                                            setDataMatrix('(01)03701089503785'+'(10)'+JSON.stringify(t.lot_BATCH_NO).replace('-',0)+'(10)'+JSON.stringify(t.create_DATE).replace('-',0));
                                            if(!(JSON.stringify(t.part_NO_SHOP).includes("3-01"))&&!(JSON.stringify(t.part_NO_SHOP).includes("3-02"))){
                                                return(
                                                <tr>
                                                    <td style={{width:'40%'}}>
                                                        <img style={{height:'18px',width:'23px', objectFit:'contain'}}src={REF}/> {t.part_NO_SHOP}  <img style={{height:'15px',width:'20px', objectFit:'contain'}}src={LOT}/> {t.lot_BATCH_NO} <img src="data:image/png;base64,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" alt="" style={{height:'15px',width:'20px',objectFit:'contain'}}/>{t.create_DATE}<br/>
                                                        <img src={udi} style={{height:'50px', width:'30px', objectFit:'contain'}} alt=""/>
                                                        <img style={{height:'20px', width:'60px',objectFit:'contain',marginLeft:'50px'}}src={CE} alt=""/><br/>
                                                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Factory_icon.svg/1099px-Factory_icon.svg.png" alt="" style={{height:'10px',width:'10px',objectFit:'contain'}}/> AMPLITUDE 11 cours Jacques Offenbach - ZA Mozart 2 26000 VALENCE – FRANCE
                                                    </td>
                                                    <td><img src={FR} style={{height:'15px',width:'20px', objectFit:'contain'}} alt=""/>{t.description}</td>
                                                    <td style={{width:'5%'}}>{t.qty_ISSUED}</td>
                                                </tr>
                                                )
                                            }else{
                                                return(
                                                    <tr>
                                                    <td style={{width:'40%'}}>
                                                        <img style={{height:'18px',width:'23px', objectFit:'contain'}}src={REF}/> {t.part_NO_SHOP}  <img style={{height:'15px',width:'20px', objectFit:'contain'}}src={LOT}/> {t.lot_BATCH_NO} <img src="data:image/png;base64,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" alt="" style={{height:'15px',width:'20px',objectFit:'contain'}}/>{t.create_DATE}<br/>
                                                        <img src={udi} style={{height:'50px', width:'30px', objectFit:'contain'}} alt=""/><br/>
                                                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Factory_icon.svg/1099px-Factory_icon.svg.png" alt="" style={{height:'10px',width:'10px',objectFit:'contain'}}/> AMPLITUDE 11 cours Jacques Offenbach - ZA Mozart 2 26000 VALENCE – FRANCE
                                                    </td>
                                                    <td><img src={FR} style={{height:'15px',width:'20px', objectFit:'contain'}} alt=""/>{t.description}</td>
                                                    <td style={{width:'5%'}}>{t.qty_ISSUED}</td>
                                                </tr>
                                                )
                                            }

                                        })
                                    }
                                </tbody>
                            </table>
4

0 回答 0