如何解决在reactjs中生成包含GS1 DataMatrix的pdf时出错
我正在 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',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',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',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',objectFit:'contain'}} alt=""/>{t.description}</td>
<td style={{width:'5%'}}>{t.qty_ISSUED}</td>
</tr>
)
}
})
}
</tbody>
</table>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
