[英]Uncaught Error: Objects are not valid as a React child (found: [object HTMLImageElement])
In reactjs how do I dynamically update the QR code component when props change.在 reactjs 中,当道具更改时如何动态更新二维码组件。 I'm using this npm package: https://www.npmjs.com/package/kjua
我正在使用这个 npm 包: https ://www.npmjs.com/package/kjua
componentWillMount()
function is working on first load but it doesn't get updated but if I render {this.state.el}
then I would get: *react-dom.development.js:57 Uncaught Error: Objects are not valid as a React child (found: [object HTMLImageElement])
. componentWillMount()
函数在第一次加载时工作,但它没有更新,但如果我渲染{this.state.el}
那么我会得到: *react-dom.development.js:57 Uncaught Error: Objects are not valid as a React child (found: [object HTMLImageElement])
。 If you meant to render a collection of children, use an array instead.*如果您打算渲染一组子项,请改用数组。*
``` 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; ```
I need to be able to dynamically update the QRCode when props amount value changed.我需要能够在道具数量值更改时动态更新 QRCode。
Saving props to state is a react anti-pattern (in the case of props.text
=> this.state.amount
), and use of componentWillMount
isn't recommended, but instead use componentDidMount
to issue side-effects after the component mounts.保存道具状态是反应的反图案(在的情况下
props.text
=> this.state.amount
),和使用componentWillMount
不推荐,而是使用componentDidMount
组件安装后问题的副作用。
I tried looking at the docs for kjua
but it seems pretty dated.我尝试查看
kjua
的文档,但它似乎已经过时了。 I assume you pass it some 'text' and it returns an QR code image of that text.我假设您向它传递了一些“文本”,它会返回该文本的二维码图像。 HTMLImageElement appears to not be renderable in react as an object, but perhaps
,src
will allow you to render it into an <img>
tag. HTMLImageElement似乎无法作为对象呈现,但也许
,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>
);
}
Assuming calls to kjua
with text data returns a new image, then you want to use componentDidUpdate
to check that new props have arrived, and if so, get new QR image and save to state:假设使用文本数据调用
kjua
返回一个新图像,那么您想使用componentDidUpdate
来检查新道具是否已到达,如果是,则获取新的 QR 图像并保存到状态:
componentDidUpdate(prevState, prevProps) {
// if current text value is not equal to the previous, calculate
// and save new QR code image in el, else ignore
if (prevProps.text !== this.props.text) {
const newQRcode = kjua({ text: `amount=${this.props.text}&memo=xxxx` });
this.setState({ el: newQRcode });
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.