使用 useEffect 从 API 中获取数据时出错

Question

我正在学习 React Native，在关注 YouTube 上的一个实时编码课程时，我遇到了以下问题。我想做的是：我正在制作一个带有 expo 的应用程序，我想从 CoinGecko's free crypto API 获取数据。我的代码是：

import React, { useState, useEffect } from "react";
import { View, Text, Image } from "react-native";
import axios from "axios";

const getCoinData = async (coinId) => {
  try {
    const response = await axios.get(
      `https://api.coingecko.com/api/v3/coins/${coinId}?community_data=false&developer_data=false`
    );
    return response.data;
  } catch (error) {
    console.log(error);
  }
};

const BugScreen = () => {
  const [coin, setCoin] = useState(null);

  useEffect(() => {
    const fetchCoinData = async () => {
      const fetchedCoinData = await getCoinData("bitcoin");
      setCoin(fetchedCoinData);
    };
    fetchCoinData();
  }, []);

  const {
    name,
    symbol,
    image: { small },
    market_cap_rank,
  } = coin;

  return (
    <View style={{ paddingHorizontal: 10 }}>
      <Text>{name}</Text>
      <Text>{symbol}</Text>
      <Image source={{ uri: small }} style={{ height: 25, width: 25 }} />
      <Text>{market_cap_rank}</Text>
    </View>
  );
};

export default BugScreen;

我收到一条错误消息，告诉我 null 不是对象（正在计算 'coin.name'）。我还包括了一个 Screenshot of the error.

每次渲染屏幕时我的理解方式 useEffect() 应该运行并获取数据，但奇怪的是即使我添加了 'console.log(coin) in the body of the 'fetchCoinData函数，控制台屏幕上什么也没有写。

如果您能帮助我了解问题所在，您将不胜感激。谢谢。

Answer 1

您将 coin 初始化为 null，因此在 API 呼叫解决之前，它仍然是 null。

也许更好的选择是将其初始化为占位符对象

const initialState = {
  name: "",
  symbol: "",
  image: {
    small: "https://via.placeholder.com/150"
  },
  market_cap_rank: ""
}

const BugScreen = () => {
  const [coin, setCoin] = useState({...initialState});

  // etc

Answer 2

感谢您的帮助。根据 @Phil 的评论，我做了以下并且有效：

import React, { useState, useEffect } from "react";
import { View, Text, Image } from "react-native";
import axios from "axios";

const getCoinData = async (coinId) => {
  try {
    const response = await axios.get(
      `https://api.coingecko.com/api/v3/coins/${coinId}?community_data=false&developer_data=false`
    );
    return response.data;
  } catch (error) {
    console.log(error);
  }
};

const BugScreen = () => {
  const initialState = {
    name: "",
    symbol: "",
    image: "https://via.placeholder.com/150",
    marketCapRank: "",
  };
  const [coin, setCoin] = useState(initialState);

  useEffect(() => {
    const fetchCoinData = async () => {
      const fetchedCoinData = await getCoinData("bitcoin");
      const fetchedData = {
        name: fetchedCoinData.name,
        symbol: fetchedCoinData.symbol,
        image: fetchedCoinData.image.small,
        marketCapRank: fetchedCoinData.market_cap_rank,
      };
      setCoin((coin) => {
        return { ...coin, ...fetchedData };
      });
    };
    console.log(coin);
    fetchCoinData();
  }, []);

  const { name, symbol, image, marketCapRank } = coin;

  return (
    <View style={{ paddingHorizontal: 10 }}>
      <Text style={{ color: "white" }}>{name}</Text>
      <Text style={{ color: "white" }}>{symbol}</Text>
      <Image source={{ uri: image }} style={{ height: 25, width: 25 }} />
      <Text style={{ color: "white" }}>{marketCapRank}</Text>
    </View>
  );
};

export default BugScreen;

使用 useEffect 从 API 中获取数据时出错

Error in working with useEffect for fetching data from an API

react-native

axios

expo

react-hooks

use-effect