javascript - React - 从 render() 调用异步函数

Question

我正在尝试编写我的第一个 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() 为每个数据调用它？功能？还是我缺少更好的方法？

Answer 1

首先，我想说componentDidMount函数是一个static函数。

但是你可以有一个像 loadQRCode 这样的异步函数，你可以在其中调用函数并迭代 API 调用并将结果推送到 array 然后您可以使用所需数据呈现 div。