时间戳

首页 > 解决方案 > 未处理的拒绝（TypeError）：无法读取未定义的属性“协议” - 使用 axios 反应钩子

reactjs - 未处理的拒绝（TypeError）：无法读取未定义的属性“协议” - 使用 axios 反应钩子

问题描述

我正在尝试将我的应用程序与 API 连接起来。它适用于类，但我尝试使用钩子。

这是错误

未处理的拒绝（TypeError）：无法读取未定义的属性“协议”

这是我的代码

import React, { useState, useEffect } from "react";
import axios from "axios";

import PokemonCard from "./PokemonCard";

const Home = () => {
  const [currentState, setNewState] = useState({
    url: "https://pokeapi.co/api/v2/pokemon?limit=600",
    pokemons: null,
  });

  useEffect(() => {
    getApi();
    
    async function getApi() {
      const res = await axios.get(currentState.url);
      setNewState({ pokemons: res.data["results"] });
    }
  });

  return (
    <>
      {currentState.pokemons ? (
        <div className="pokemonCards">
          {currentState.pokemons.map((poke) => (
            <PokemonCard key={poke.name} name={poke.name} url={poke.url} />
          ))}
        </div>
      ) : (
        <h1> Loading </h1>
      )}
    </>
  );
};

标签： reactjsaxiosreact-hooks

解决方案

你不是说prototype吗？

无论如何，当您使用 时useState，每个实例都代表一个变量，而不是整个状态。

所以，你必须：setNewState({ url: myUrl, pokemons: myNewPokemons });

或者，甚至更好：

setNewState(prevState => {
    return {
        ...prevState,
        pokemons: myNewPokemons
    }
});

推荐阅读