如何 link QR code 到猫照片 (REACT)

Question

这里我有一个 ajax 请求获取随机猫的照片

import React, { Component } from 'react';
class RandomCat extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
    this.fetchRandomCatImg = this.fetchRandomCatImg.bind(this)
  }

  componentDidMount() {
    this.fetchRandomCatImg()
  }

  fetchRandomCatImg() {
    fetch("https://aws.random.cat/meow")
      .then(response => response.json())
      .then(data => {
        this.setState({
          error: null,
          ready: true,
          src: data.file
        })
      })
      .catch(error => this.setState({ error }))
  }

  render() {
    if (this.state.error) return <p>Oops, something went wrong!</p>
    if (!this.state.ready) return <p>Loading...</p>
    return <img src={this.state.src} className="cat" alt="random cat photo" />
  }
}
export default RandomCat;

这里我们需要制作一个二维码图像代码，链接到从该调用生成的同一张照片这意味着我们需要将 cat api 产生的数据传递给另一个获取二维码的 ajax 调用我尝试这样做但它给了另一张照片（新的）

import React, { Component } from 'react';
class QR extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
    this.fetchQR = this.fetchQR.bind(this)
  }

  componentDidMount() {
    this.fetchQR()
  }

  fetchQR() {
    fetch("https://qrtag.net/api/qr_12.svg?url=https://aws.random.cat/meow" )
      .then(response => response.json())
      .then(data => {
        this.setState({
          error: null,
          ready: true,
          src: data.file
        })
      })
      .catch(error => this.setState({ error }))
  }

  render() {
    if (this.state.error) return <p>Oops, something went wrong!</p>
    if (!this.state.ready) return <p>Loading...</p>
    return <img className="QR"src={this.state.src} alt="qrtag"/>
  }
}
export default QR;

Answer 1

这有点不同，但您可以使用这个包： https://www.npmjs.com/package/qrcode.react

然后你只需要打一个 API 电话。一旦文件的 URL 处于您的状态，您就可以像这样显示 QR 码：

<QRCode value={this.state.src} />

但是如果你还想使用二维码生成器API，你需要将刚刚抓取到的猫的URL传给这个组件，data.fetch的值(this.state.src).

通过了https://aws.random.cat/meow当然不行

如何 link QR code 到猫照片 (REACT)

how to link QR code to a cat photo (REACT)

reactjs

ajax

webapi