Question

我正在尝试编写我的第一个React应用，它应该为不同的输入生成QR码并将其显示在网页上。

我已经有了自己的“库”函数来为我做这件事-我仅将数据作为参数传递，并且它返回数据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>，我需要获取并呈现每个QR码。

如果我有一个函数，就像这样：

async loadQRCode(data){
    let url = await getDataURL(data);
    return url;
}

有什么方法可以直接从render()函数为每个数据调用它吗？还是我缺少任何更好的方法？

Answer 1

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

但是您可以拥有一个像loadQRCode这样的异步函数，您可以在其中调用该函数并迭代API调用并将结果推送到array中，然后可以渲染{{ 1}}，其中包含必需的数据。

Answer 2

您尝试过这样的事情吗？

// some code before
this.state.listOfImages.map((image, i) =>
  <div>
    <img
      alt=""
      src={this.loadQRCode(image.src)}
      style={{height: 200 + 'px', width: 200 + 'px'}}
    />
  </div>

)
// some code after

您可能需要在构造函数中绑定getDataURL方法

Answer 3

我使用构造函数中的对象数组解决了这个问题：

constructor(props){
    super(props);
    this.state = {
        qrCodeData: [
            {
                data: <data>
                qrcode: ''
            },
            {
                data: <data>
                qrcode: ''
            },
            ...
        ]
    }
}

在componentDidMount()中，我遍历数组并调用getDataURL()函数来设置qrcode。

async componentDidMount(){
    let qrCodeDataCopy = this.state.qrCodeData.slice();
    for (let item of qrCodeDataCopy) {
        item.qrcode = await getDataURL(item.data);
    }
    this.setState({qrCodeData: qrCodeDataCopy});
}

Answer 4

最好在componentDidMount中调用API请求。然后，您可以在此之后致电setState。

async componentDidMount(){
        const result = await loadQRCode(`your params`);
        this.setState({ result });
    }

反应-从render（）调用异步函数

4 个答案: