Question

我正在尝试使用react钩子导入卡API并将卡打印到浏览器中，但是我不知道怎么办？

我正在尝试使用.map函数来访问“图像”

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [deck, setDeck] = useState ([]);

  useEffect(async () => {
      const response = await fetch('https://deckofcardsapi.com/api/deck/new/draw/?count=5')
      const data = await response.json();
      setDeck(data);
      console.log(data)
    }, []);

  return (
      <ul>
        {deck.map(a => (<li> {a.cards.image}</li>))} // how to access api's "image" ??
      </ul>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

Vicente，请看此CodeSandbox，以查看如何实现它的示例。这是App组件：

const App = () => {
  const [deck, setDeck] = React.useState({ cards: [] });

  React.useEffect(() => {
    async function getData() {
      const response = await fetch(
        "https://deckofcardsapi.com/api/deck/new/draw/?count=5"
      );
      const data = await response.json();
      setDeck(data);
      console.log(data);
    }
    getData();
  }, []);

  return (
    <div className="App">
      {deck.cards.map((card, index) => (
        <div key={index}>
          <img src={card.image} alt={card.code} />
        </div>
      ))}
    </div>
  );
};

要考虑的重要事项是React.useEffect应该运行synchronously。与其在其中传递async函数，不如在async回调中定义一个useEffect函数，并使其同步运行。在此新功能内，您可以await来解决承诺，还可以在此功能内设置状态。请阅读"React's useEffect" docs for more information

您遇到的另一个问题是使用空数组（deck）实例化[]状态。但是，响应是一个对象，因此更新state时会出错。我通过在端点结果之后使用定义了deck列表的对象初始化cards状态来解决这个问题。

带有钩子和打印的简单获取api？

1 个答案: