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

Question

所以我正在构建一个小型网络应用程序，它从 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

您有异步 componentDidMount 和异步提取，但您在尝试访问数据之前没有等待数据。

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:[{}]
  }

在调用giphyapi并将结果设置为状态（这是一个异步操作）之前，这个对象被传递给Trending组件

<Trending data={data} />

在趋势组件中，您访问第一个元素的属性 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

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

Getting an undefined object before the object is populated

reactjs

giphy-api