您如何从 axios 访问数据？

Question

这是我的

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)的碎块应该是在image array of objects中挑出第一个数组name的值。

非常感谢您的帮助，试图找出为什么在过去 8 小时内在全球范围内搜索显然 Google 没有的答案却没有奏效。

Answer 1

由于 Axios 调用和 setState 挂钩是异步的，因此您需要检查是否已设置 image，类似这样

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

Answer 2

const [image,setImage] = useState([]) 将状态初始化为空数组。 useEffect 挂钩将在组件首次安装后运行。这意味着组件第一次渲染状态值 image 仍然是一个空数组 ([])，所以当您尝试访问 image[0].name 时，因为 image[0] 在 undefined 它会产生错误。

因为数组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>
)

您如何从 axios 访问数据？

How do you access data from axios?

reactjs

axios

use-effect

use-state