無法獲取api-“未處理的承諾拒絕”-有解無憂

我有一個問題，有人可以告訴我，我對不對，但對本機 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 中，我每張卡片都在獲取口袋妖怪，看起來像這樣

    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 的型別如果我第一次跳到這個螢屏是行不通的，但是當我進入并保存任何更改時，這可以作業，在其他方式是未定義引數的問題。

第二個問題，每次在此螢屏中第一次顯示“未處理的承諾拒絕”，但是當我洗掉 console.log 時，它沒有顯示任何警告

抱歉，如果有人認為我寫的不清楚，請解釋一下，我會盡力糾正我的問題

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

//EDIT Poke Card 功能組件

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 第二部分（本圖鑒的主要部分）

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>
  );
}

//編輯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>
  );

然后我收到錯誤“未定義不是物件（評估 pokemonData.Types[0]）”

uj5u.com熱心網友回復：

在測驗您的代碼并進行一些編輯后，結果是

Pokecard.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>
    );

不包含樣式，并且可能需要進行一些其他編輯，例如使用 try catch 包裝您的 axios 呼叫以處理故障，但這應該會讓您走上正確的軌道無法獲取 api - “未處理的承諾拒絕”

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/445693.html

標籤：javascript 反应式 api 异步反应钩子

上一篇：異步任務阻塞了UI

下一篇：如何異步/等待獲取回應？