时间戳

首页 > 解决方案 > 使用 axios 进行异步 API 调用后出现 TypeError

reactjs - 使用 axios 进行异步 API 调用后出现 TypeError

问题描述

我试图弄清楚我的代码上发生的一些事情。我正在从我制作的 Rest API 中获取一些数据，在异步调用之后，我得到：

TypeError: Cannot read property 'field' of undefined

我无法弄清楚发生了什么，因为当我在控制台上记录数据时，我可以看到我的对象填充了正确的信息。只是为了确保我没有犯类型错误，我已经从 中复制了数据console.log(response)并创建了一个 Object 并且它起作用了。

这是电话：

import axios from 'axios';

const url_service_villain = "https://some_url/"

export const findRandomVillain = async () => {
    try {
        const {data} = await axios.get(url_service_villain + "find/random");
        return await data
    } catch (err) {
        console.log(err);
    };
};

这是我调用该方法的地方：

import React from 'react';

import Character from './components/Character'

import {findRandomVillain} from './services/VillainService';

async function getRandomVillain(){
  const data = await findRandomVillain();
  console.log(data);
  return data;
}

function CharacterList(){ 
  const char = getRandomVillain();
  return (
    <section className="characterList">
      <Character key={char.id} images={char.images.md} name={char.name} powerstats={char.powerstats}/>
    </section>    
  )
};

export default CharacterList;

在方法getRandomVillain()上console.log(data)打印我想要的对象，但在CharacterList我得到TypeError上面列出的我。

我还在控制台窗口的顶部注意到以下内容：

Promise {<pending>}  App.js:17
Promise {<pending>}  App.js:17
App.js:20 Uncaught TypeError: Cannot read property 'md' of undefined
    at CharacterList (App.js:20)
...{/*long list of errors here*/}
{id: "123", name: "Sinestro", powerstats: {…}, images: {…}} App.js:11
{id: "123", name: "Sinestro", powerstats: {…}, images: {…}} App.js:11
{id: "123", name: "Sinestro", powerstats: {…}, images: {…}} App.js:11

我认为这与异步调用有关，我不知道为什么最后一行重复 3 次，因为我只记录一次。

标签： reactjsasync-awaitaxios

解决方案

当反应组件正在渲染时。它不会等待异步调用完成。当第一次安装 react 组件时，char 是空的，但是您从 char: "id"; 获取属性值；“姓名”。因此，您需要添加一个异常来确保何时使用 char 渲染组件字符并成功调用 API。

{char !== undefined (这里有例外) && }

推荐阅读