我正在尝试编写我的第一个 React 应用程序,它应该为不同的输入生成二维码并将它们显示在网页上。
我已经有了自己的“库”函数来为我做这件事——我只将数据作为参数传递,它返回一个数据 URL 的 promise ,我将其用作图像的 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>
具有不同的数据,我需要获取并呈现每个数据的 QR 码。
如果我有一个函数,像这样:
async loadQRCode(data){
let url = await getDataURL(data);
return url;
}
有没有办法直接从 render()
为每个数据调用它?功能?还是我缺少更好的方法?
最佳答案
首先,我想说componentDidMount
函数是一个static
函数。
但是你可以有一个像 loadQRCode
这样的异步函数,你可以在其中调用函数并迭代 API
调用并将结果推送到 array
然后您可以使用所需数据呈现 div
。
关于javascript - React - 从 render() 调用异步函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57052788/