API 的结果可以记录到控制台，但无法呈现在 UI 上。尝试映射结果出现 Uncaught TypeError

Question

我正在尝试从免费 api 获取信息以显示在我的页面上。我正在使用 React 构建一个加密应用程序，我可以使用 console.log(response.data) 来查看数组，但是当我尝试将 console.log 更改为 setCoinList(response.data.coins) 时，我收到此错误：

未捕获类型错误：coinList.map 不是函数

我正在使用 axios，我不认为问题出在 get 上，我可以将信息返回到控制台并查看它，而且我从一个空白数组开始，所以我不知道这里出了什么问题。

这是有问题的代码：

function App() {

  const [coinList, setCoinList] = useState([]);

  useEffect(() => {
    const options = {
      method: "GET",
      url: "https://openapiv1.coinstats.app/coins",
      params: { limit: "20" },
      headers: {
        accept: "application/json",
        "X-API-KEY": MYAPIKEYHERE,
      },
    };

    axios
      .request(options)
      .then((response) => {
        setCoinList(response.data.coins);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (

<div className="container mx-auto mt-8">
        {coinList.map((coin) => {
          return (
            <Coin
              key={coin.rank}
              name={coin.name}
              icon={coin.icon}
              symbol={coin.symbol}
              volume={coin.volume}
              price={coin.price}
            />
          );
        })}
      </div>
    </>
  );
}

语法看起来正确，因为我的编辑器没有在语法上抛出错误，但无论出于何种原因，这些值都不会加载。 Coin 组件也没有抛出任何错误。 API 的值显示正确 地图是否可能因为数据尚未加载而没有任何可映射的内容？如何确保我首先获得这些数据？任何帮助将不胜感激。

编辑：我尝试将代码更改为：

<div className="container mx-auto mt-8">
        {coinList && coinList.map((coin) => {
          return (
            <Coin
              key={coin.rank}
              name={coin.name}
              icon={coin.icon}
              symbol={coin.symbol}
              volume={coin.volume}
              price={coin.price}
            />
          );
        })}
      </div>

我没有收到任何错误，但用户界面上没有显示任何内容

编辑：

控制台显示数组两次 -

Answer 1

在 useEffect 回调中使用

setCoinList(response.data.coins)

，而不是

 setCoinList(response.data.result)

。

coins

对象中没有

response.data

键。

useEffect(() => {
    const options = {
      method: "GET",
      url: "https://openapiv1.coinstats.app/coins",
      params: { limit: "20" },
      headers: {
        accept: "application/json",
        "X-API-KEY": MYAPIKEYHERE,
      },
    };

    axios
      .request(options)
      .then((response) => {
        setCoinList(response.data.result);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);