1

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

此处的 API https://api.giphy.com/v1/gifs/trending?api_key=4A40i9pS4hOK6N3f77WYflnhZe93UIB4&limit=5&rating=g由数据、元数据和分页组成。我想要的只是在每个数据对象的图像对象中缩小的 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 |

在此处输入图像描述

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

4

2 回答 2

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>
  );
};
于 2020-08-03T13:47:35.060 回答
1

您的初始状态为空：

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
于 2020-08-03T13:47:43.923 回答