我正在尝试使用axios提取的数据动态设置src
组件的<img />
属性,但始终失败。我不知道如何从获取的数据对象中获取urlToImage
属性的值。
我尝试过const mainArticle = articles[0].urlToImage;
,然后设置src={mainArticle}
。我可以console.log(articles[0])
但不能console.log(articles[0].title)
,因为它突然变成了undefined。知道为什么会这样吗?
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import AsideNews from '../../components/aside-news/aside-news.component';
import './front-page.styles.scss';
const FrontPage = () => {
const [articles, setArticles] = useState([]);
useEffect(() => {
const url =
'https://newsapi.org/v2/everything?' +
'q=guitar&' +
'from=2019-10-17&' +
'sortBy=popularity&' +
'apiKey=thisIsSecret';
const getData = async () => {
const response = await axios
.get(url)
.then(console.log('isFetched'))
.catch(err => console.error(err));
const { data } = response;
setArticles(data.articles);
};
getData();
}, []);
return (
<div className='frontpage' articles={articles}>
<main className='main-content'>
<section className='first-section'>
<AsideNews articles={articles} />
<div className='main-headline'>
<img
src={articles[0].urlToImage}
alt='main-headline'
height='400px'
width='90%'
/>
<div className='main-headline-desc'>
{articles
.filter((article, idx) => idx === 0)
.map(article => (
<p>{article.description}</p>
))}
</div>
<div className='main-headline-title'>
{articles
.filter((article, idx) => idx === 0)
.map(article => (
<Link to='/'>
<h2>{article.title}</h2>
</Link>
))}
</div>
</div>
</section>
</main>
</div>
);
};
export default FrontPage;
我期望与article.title
相同,但是这是我得到的:TypeError: articles[0] is undefined