如何从 axios 访问数据？答案

【问题标题】：How do you access data from axios?如何从 axios 访问数据？
【发布时间】：2020-10-02 19:31:55
【问题描述】：

这就是我所拥有的

import React, { useState,useEffect } from 'react';
import './App.css';
import axios from 'axios'
import PokemonCard from './components/PokemonCard'

const BASE_URL = 'https://api.pokemontcg.io/v1/cards'

const App = () => {

const [image,setImage] = useState([])

useEffect(() => {
axios.get(`${BASE_URL}`)
.then(function (response) {
  setImage(response.data)
})
.catch(function (error) {
  console.log(error);
})
},[])

这行得通...

console.log(image) // displays an ARRAY OF OBJECTS

这应该可以工作，但没有......

console.log(image[0].name)

后一个console.log 可以正常工作的原因是image 绝对是一个对象数组。我知道这是事实。所以，[0] 会挑选出第一个数组，你会认为 name 是键值对的名称。所以，这个console.log(image[0].name) 的残缺部分应该会挑出对象图像数组中第一个数组名称的值。

感谢您的帮助，试图弄清楚为什么在过去 8 小时内搜索全球以寻找显然谷歌没有的答案。

【问题讨论】：

标签： reactjs axios use-effect use-state

【解决方案1】：

const [image,setImage] = useState([]) 将状态初始化为空数组。并且useEffect 钩子将在组件第一次挂载后运行。这意味着组件第一次呈现状态值为image 时仍然是一个空数组（[]），因此当您尝试访问image[0].name 时，因为image[0] 在image[0] 中会产生错误。

因为数组image是在组件第一次挂载后由异步API调用填充的，如果要记录image[0].name最简单的方法是检查数组的length然后记录第一个元素的名称。如果您想将image[0].name 作为道具传递，则必须进行相同的检查。

例如，

if (image.length) {
  console.log(image[0].name) // expected result will be logged
}

// if you want to pass the value of image[0].name as a prop
return (
  <div>
   {
    image.length && <SomeComponent imgName={image[0].name}/>
   }
  </div>
)

【讨论】：

【解决方案2】：

由于 Axios 调用和 setState 钩子是异步的，你需要检查 image 是否已经设置，类似这样

if(image && image.length > 0) console.log(image[0].name)

【讨论】：