無法獲取 api -“未處理的 promise 拒絕”

Question

我有一個問題，有人可以告訴我，我是對還是不對，但 React Native api fetch 隨機工作？ 有人也可以告訴我我需要閱讀什么來理解它是如何工作的，因為我想制作“pokedex”但我無法獲取 api，我有這樣的想法

    const getDataFromApi = async () => {
    let cancel;
    const res = await axios.get("https://pokeapi.co/api/v2/pokemon", {
      cancelToken: new axios.CancelToken((c) => (cancel = c)),
    });
    const data = await res.data.results.map((m) => m);

    setPokemon(data);

    return () => cancel();
  };
    useEffect(() => {
        getDataFromApi();
      }, [currentPageUrl]);

然后我傳遞參數

<ScrollView>
    <View style={styles.containerOfTiles}>
      {pokemon.map((item) => (
        <Pokecard style={styles.tileContainer}>{item}</Pokecard>
      ))}
      {/* <Pokelist pokemon={pokemon} /> */}
    </View>
  </ScrollView>

在 Pokecard 中，我正在從每張卡片中獲取 pokemon，看起來像這樣

    const getPokemonData = async () => {
    const res = await axios.get(url);

    const pokemonObject = await JSON.stringify(res.data);
    setPokemonData(pokemonObject);
    console.log(pokemonData.height);
  };
  useEffect(() => {
    getPokemonData();
  }, []);

在控制台中，顯示未定義（只有一次顯示正常高度）

我的問題：如果我想使用 pokemonData 中的參數，例如 pokemon 的類型，如果我第一次跳入此屏幕則不起作用，但是當我進入並保存任何更改時，這會起作用，在其他情況下方式是未定義參數的問題。

第二個問題，每次在這個屏幕上第一次顯示“未處理的 promise 拒絕”但是當我刪除 console.log 然后它沒有顯示任何警告

對不起，如果我寫的東西不清楚，請解釋，我會盡力糾正我的問題

（我想我做錯了）提前謝謝你

//編輯撲克牌 function 組件

export default function Pokecard(props) {
  const url = props.children.url;
  const pokemonIndex = url.split("/")[url.split("/").length - 2];
  const imageUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/${pokemonIndex}.png`;

 
  const colorsTiles = [
    {
      rock: "rgb(148, 81, 81)",
      ghost: "rgb(247, 247, 247)",
      electric: "rgb(255, 255, 161)",
      bug: "#F6D6A7",
      poison: "#e0a7f6",
      normal: "#F4F4F4",
      fairy: "rgba(255, 192, 203, 0.863)",
      fire: "#FBE3DF",
      grass: "#E2F9E1",
      water: "#E0F1FD",
    },
  ];
  const [pokemonData, setPokemonData] = useState([]);

  const getPokemonData = async () => {
    const res = await axios.get(url).then(() => {});

    const pokemonObject = await JSON.stringify(res.data);
    setPokemonData(pokemonObject);
    console.log(pokemonData.height);
  };
  useEffect(() => {
    getPokemonData();
  }, []);
  return (
    <View
      key={props.children.name}
      style={[styles.tileContainer, { backgroundColor: "white" }]}
    >
      <Text style={styles.pokemonName}>{props.children.name}</Text>
      <View style={styles.imageBG}>
        <Image
          style={styles.pokemonImage}
          source={{
            uri: imageUrl,
          }}
        />
      </View>
    </View>
  );
}

AND 第二部分（這個 pokedex 的主要部分）

export default function Pokedex({ navigation }) {
  const [pokemon, setPokemon] = useState([]);
  const [currentPageUrl, setCurrentPageUrl] = useState(
    "https://pokeapi.co/api/v2/pokemon"
  );
  const [nextPageUrl, setNextPageUrl] = useState();
  const [prevPageUrl, setPrevPageUrl] = useState();

  const getDataFromApi = async () => {
    let cancel;
    const res = await axios.get("https://pokeapi.co/api/v2/pokemon", {
      cancelToken: new axios.CancelToken((c) => (cancel = c)),
    });
    const data = await res.data.results.map((m) => m);

    setPokemon(data);

    return () => cancel();
  };

  useEffect(() => {
    getDataFromApi();
  }, [currentPageUrl]);
  return (
    <View
      style={[globalStyles.container, { backgroundColor: "rgb(43,41,44)" }]}
    >
      <BackButton navigation={navigation} />

      <ScrollView>
        <View style={styles.containerOfTiles}>
          {pokemon &&
            pokemon.map((item) => (
              <Pokecard style={styles.tileContainer}>{item}</Pokecard>
            ))}
          {/* <Pokelist pokemon={pokemon} /> */}
        </View>
      </ScrollView>
    </View>
  );
}

//EDIT 2 當我變成這樣的時候

const getPokemonData = async () => {
    const res = await axios.get(url);

    const pokemonObject = await res.data;
    console.log(pokemonObject.types[0].type.name);
    setPokemonData(pokemonObject);
  };
  useEffect(() => {
    getPokemonData();
  }, []);
  return (
    <View
      key={props.children.name}
      style={[
        styles.tileContainer,
        { backgroundColor: colorsTiles[0][pokemonData.types[0].type.name] },
      ]}
    >
      <Text style={styles.pokemonName}>{props.children.name}</Text>
      <View style={styles.imageBG}>
        <Image
          style={styles.pokemonImage}
          source={{
            uri: imageUrl,
          }}
        />
      </View>
    </View>
  );

然后我得到錯誤“Undefined is not an object (evaluating pokemonData.Types[0])”

Answer 1

測試您的代碼並進行一些編輯后，結果是

撲克牌.js

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

const colorsTiles = {
    rock: "rgb(148, 81, 81)",
    ghost: "rgb(247, 247, 247)",
    electric: "rgb(255, 255, 161)",
    bug: "#F6D6A7",
    poison: "#e0a7f6",
    normal: "#F4F4F4",
    fairy: "rgba(255, 192, 203, 0.863)",
    fire: "#FBE3DF",
    grass: "#E2F9E1",
    water: "#E0F1FD",
};

const typeToColor = (pokemonType) => {
    return colorsTiles[pokemonType] ?? "white";
};

export default function Pokecard(props) {
    const url = props.pokemon.url;
    const pokemonIndex = url.split("/")[url.split("/").length - 2];
    const imageUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/${pokemonIndex}.png`;

    const [pokemonData, setPokemonData] = useState(undefined);
    const [pokemonType, setPokemonType] = useState(undefined);

    const getPokemonData = async () => {
        try {
            const res = await axios.get(url);
            setPokemonData(res.data);
            setPokemonType(res.data.types[0]?.type?.name);
        } catch (err) {}
    };
    useEffect(() => {
        getPokemonData();
    }, []);

    return (
        <View key={props.pokemon.name}>
            <Text>{props.pokemon.name}</Text>
            <View>
                {pokemonData && (
                    <Image
                        style={[
                            { height: 100 },
                            {
                                backgroundColor: typeToColor(pokemonType),
                            },
                        ]}
                        source={{
                            uri: imageUrl,
                        }}
                    />
                )}
            </View>
        </View>
    );
}

和 pokdex 文件

const [pokemon, setPokemon] = useState([]);
    const [currentPageUrl, setCurrentPageUrl] = useState(
        "https://pokeapi.co/api/v2/pokemon"
    );
    const [nextPageUrl, setNextPageUrl] = useState();
    const [prevPageUrl, setPrevPageUrl] = useState();

    const getDataFromApi = async () => {
        let cancel;
        const res = await axios.get("https://pokeapi.co/api/v2/pokemon", {
            cancelToken: new axios.CancelToken((c) => (cancel = c)),
        });
        const data = await res.data.results;

        setPokemon(data);

        return () => cancel();
    };

    useEffect(() => {
        getDataFromApi();
    }, [currentPageUrl]);

    return (
        <View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
            <View>
                {pokemon.map((item) => (
                    <Pokecard pokemon={item} />
                ))}
                {/* <Pokelist pokemon={pokemon} /> */}
            </View>
        </View>
    );

不包括 styles 並且可能需要進行一些其他編輯，例如用 try catch 包裝您的 axios 調用以處理故障，但這應該讓您走上正軌