Question

在reactjs中，当道具更改时如何动态更新QR码组件。我正在使用以下npm软件包：https://www.npmjs.com/package/kjua

componentWillMount()函数在第一次加载时起作用，但是没有更新，但是如果我渲染{this.state.el}，则会得到：*react-dom.development.js:57 Uncaught Error: Objects are not valid as a React child (found: [object HTMLImageElement])。如果要渲染子级集合，请改用数组。*

  ```
    import React, { Component } from 'react';
    import kjua from "kjua";
    
    class QrCodeOnAmountEntered extends Component {
      constructor(props) {
        super(props);
        this.state = {
          el: kjua({
            text: `amount=${
              this.props.text
            }&memo=xxxx`
          }),
          amount: this.props.text
        };
      }
      
      componentWillMount(){
        document.querySelector('body').appendChild(this.state.el);
      }
    
      render() {
        return (
          <React.Fragment>
            QrCodeOnAmountEntered amount: {this.props.text}
            
    <p>Print QRCode here:</p>{this.state.el}
            
          </React.Fragment>
        );
      }
    }
    
    
    export default QrCodeOnAmountEntered; ```

当道具金额更改时，我需要能够动态更新QRCode。

Answer 1

保存状态陈述是一种反模式（在props.text => this.state.amount的情况下），不建议使用componentWillMount，而应使用{{ 1}}，以便在组件安装后产生副作用。

我尝试查看componentDidMount的文档，但看起来似乎过时了。我假设您向其传递了一些“文本”，并且它返回了该文本的QR码图像。 HTMLImageElement似乎无法作为对象进行渲染，但是也许kjua可以将其渲染到,src标签中。

<img>

假设使用文本数据调用render() { const { el } = this.state; return ( <React.Fragment> QrCodeOnAmountEntered amount: {this.props.text} <p>Print QRCode here:</p> {el && <img src={el.src}/>} </React.Fragment> ); }返回一个新图像，那么您想使用kjua来检查是否有新的道具到达，如果是，则获取新的QR图像并保存到状态：

componentDidUpdate

未捕获的错误：对象作为React子对象无效（发现：[object HTMLImageElement]）

1 个答案: