我正在尝试编写我的第一个 React 应用程序，它应该为不同的输入生成二维码并将它们显示在网页上。
我已经有了自己的“库”函数来为我做这件事——我只将数据作为参数传递，它返回一个数据 URL 的承诺，我将它用作图像的 src，然后就完成了。这是它现在的工作原理：
class App extends Component {
constructor(props){
super(props);
this.state = {
dataUrl: '',
}
}
async componentDidMount(){
let url = await getDataURL('<some imaginary static data>');
this.setState({dataUrl: url});
}
render() {
return(
<div className="App">
<div>
<img alt="" src={this.state.dataUrl} style={{height: 200 + 'px', width: 200 + 'px'}} />
</div>
</div>
);
}
}
但是现在我需要getDataURL()多次调用一些真实数据，例如，我可能有多个<div>具有不同数据的 's，我需要获取并呈现每个数据的 QR 码。
如果我有一个函数，就像这样：
async loadQRCode(data){
let url = await getDataURL(data);
return url;
}
有什么方法可以直接从render()函数中为每个数据调用它吗？或者有没有更好的方法我错过了？
首先，我想说componentDidMount函数就是static函数。
但是你可以有一个异步函数，比如loadQRCode你可以调用函数并迭代API调用并将结果推送到array然后你可以div用所需的数据呈现's 。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句