在填充对象之前获取未定义的对象

Question

所以我只构建了一个小型 Web 应用程序，它从 giphy API 获取数据然后显示它。 忍受我。这篇很长。

export const fetchTrending = async () => {
try {
    const {data:{data}} = await axios.get('https://api.giphy.com/v1/gifs/trending?api_key=4A40i9pS4hOK6N3f77WYflnhZe93UIB4&limit=5&rating=g')
    return data;

} catch (err) {
    console.log(err);
}

}

然后数据到app.js

  class App extends React.Component{
  state={
    data:[{}]
  }

   async componentDidMount(){
     const response = await fetchTrending();
     this.setState({data:response})
   }

  render(){
    const {data} = this.state;

    return (
      <div>
        <NavBar />
        <img className={styles.ad1} src="https://media.giphy.com/headers/2020-07-27-05-1595862312/NBA_BANNER_HP.gif" />
        <Trending data={data} />
      </div>
    )
  }
}

从那里到最终目的地。

export const Trending = ({data:data}) => {

  const images = data[0].images;
  console.log(images);

  return (
    <div>
      <h2 className={styles.trending}>TRENDING Gifs</h2>
      
    </div>
  );
};

https://api.giphy.com/v1/gifs/trending?api_key=4A40i9pS4hOK6N3f77WYflnhZe93UIB4&limit=5&rating=g 的 API 由数据、元数据和分页组成。 我想要的只是每个数据对象的图像对象中缩小的 url。但每次我尝试解构它。无论我尝试什么，它都会给我未定义的对象错误。再次为冗长的描述道歉。如果我没有写所有这些你不会明白的。

我得到的错误是这样的。

Cannot destructure property 'downsized' of 'images' as it is undefined.
Trending
/src/Components/Trending/Trending.jsx:8
   5 | export const Trending = ({data:data}) => {
   6 | 
   7 |   const images = data[0].images;
>  8 |   const {downsized} = images;
   9 |   console.log(downsized);
  10 | 

enter image description here

还得到一个未定义的对象。为什么？？？？

Answer 1

您有 async componentDidMount 和 async fetch 但您在尝试访问之前没有等待数据。

export const Trending = ({data:data}) => {

  // ***Dont try to access it if it doesn't exist yet.***
  if (!data[0].images) return <div />

  const images = data[0].images;
  console.log(images);

  return (
    <div>
      <h2 className={styles.trending}>TRENDING Gifs</h2>
      
    </div>
  );
};

Answer 2

你的初始状态是空的：

state={
    data:[{}]
  }

在调用giphy api并将结果设置为状态（异步操作）之前，将此对象传递给Trending组件

<Trending data={data} />

在 Trending 组件中，您可以访问第一个元素的属性 images：

const images = data[0].images;
const {downsized} = images;

但是你的初始数据是[{}]，所以data[0] = {} 和data[0].images 是未定义的。然后，您尝试访问未定义项上的属性downsized！

const data = [{}}

data[0]; // => {}
data[0].images; // => undefined
data[0].images.downsized // => ERROR!

在尝试访问缩小的属性之前，您需要检查图像是否存在

const downsized = images ? images.downsized : null