Question

我正在尝试使用React构建纸牌记忆游戏，其中纸牌是http://robohash.org的机器人。我的卡片阵列如下所示：

{id: 0, cardState: CardState.1, backgroundImage: ''},
{id: 1, cardState: CardState.1, backgroundImage: ''},

由于使用onClick在每张卡上调用url（“ https://robohash.org/ ...”）需要花费时间，因此我尝试使用axios.get获取机器人，然后将其保存到状态。但是，无论我尝试什么，我似乎都无法使其正常工作。

我的功能看起来像这样（我有16张卡，所以我需要将8个机器人相乘两次）

async fetchRobots() {
  let cards = [...this.state.cards];
  let robots = [...this.state.robots];
  for (let i = 0; i < 8; i++) {
    try {
      const resp = await axios.get(`https://robohash.org/${i}?size:150x150`);
      robots.push(resp.data, resp.data);
    } catch (e) {

    }
  }
  this.setState({
    cards: cards.map((card, i) => {
      card.backgroundImage = "url(data:image/png," + robots[i];
    })
  });
}

我尝试将“ base64”添加到标题中，但是它也不起作用。有什么办法可以将图像保存到状态并显示出来？

在此先感谢您的帮助！

Answer 1

状态是不可变的。您不仅可以按状态推送对象或更新它们。

例如，要更改状态，您需要调用this.setState({robots: yourArray});，这将使用新数组更新状态。每当状态被修改时，这就会触发React中的重新渲染。

Answer 2

解决方案的种类

我们将以 blob 的形式返回图像并将其转换为 base64

function getBase64FromBlob(blob){
    return new Promise((resolve)=>{
        var reader = new FileReader();
        reader.readAsDataURL(blob); 
        reader.onloadend = function() {           
             resolve(reader.result);
        }
    });
}


async fetchRobots() {
  let cards = [...this.state.cards];
  let robots = [...this.state.robots];
  for (let i = 0; i < 8; i++) {
    try {
      const resp = await axios.get(`https://robohash.org/${i}?size:150x150`, {responseType:'blob'});
      const imgBase64 = await getBase64FromBlob(resp.data); // convert image to base64
      robots.push(imgBase64, imgBase64); // imgBase64 = "data:image/png;base64, ..."
    } catch (e) {

    }
  }
  this.setState({
    cards: cards.map((card, i) => {
      card.backgroundImage = "url(" + robots[i] + ")";
    })
  });
}

您还可以使用 imgBase64 作为 img.src

的源

将背景图片保存到状态

2 个答案: