Javascript 为什么项目[0]未定义？

我正在尝试动态设置我的

的
src
属性。我可以
console.log（articles[0]）
但不能
console.log（articles[0].title）
因为它突然变成了未定义的。知道为什么会这样吗

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;

import React，{useffect，useState}来自“React”；
从'react router dom'导入{Link}；
从“axios”导入axios；
从“../../components/AsideNews/AsideNews.component”导入AsideNews；
导入“./FrontPage.styles.scss”；
常量FrontPage=（）=>{
const[articles，setArticles]=useState（[]）；
useffect（（）=>{
常量url=
'https://newsapi.org/v2/everything?' +
“q=吉他&”+
“自2019年10月17日起&”+
“sortBy=受欢迎程度&”+
“apiKey=这是秘密的”；
const getData=async（）=>{
常数响应=等待axios
.get（url）
.then（console.log（'isFetched'））
.catch（err=>console.error（err））；
const{data}=响应；
setArticles（data.articles）；
};
getData（）；
}, []);
返回(
{条款
.filter（（文章，idx）=>idx==0）
.map（文章=>(
{文章说明}

))}
{条款
.filter（（文章，idx）=>idx==0）
.map（文章=>(
{文章标题}
))}
);
};
导出默认FrontPage；

我希望与
article.title
一样工作，但我得到的是：
TypeError:articles[0]未定义
您好，您可以在使用它之前检查是否已加载文章，如下所示：

<img src={articles && articles[0].urlToImage} alt='main-headline' height='400px' width='90%'/>



“&&”运算符在尝试加载它之前检查它是否存在。缺点是，当图像仍然为空时，页面可能会加载一些元素

另一个选项是具有isFetched状态，该状态在加载数据时切换为true，如果加载数据，则有条件地呈现整个组件

const[isFetched, setIsFetched] = useState(false)

    const getData = async () => {
      const response = await axios
        .get(url)
        .then(()=> {
           setIsFetched(true)

           //write remainder of your function

    };
    getData();
  }, []);

return (!isFetched ? 'data loading' :
   <div>Your div component</div>)

const[isFetched，setIsFetched]=useState（false）
const getData=async（）=>{
常数响应=等待axios
.get（url）
.然后（（）=>{
setIsFetched（真）
//编写函数的剩余部分
};
getData（）；
}, []);
返回（！isFetched？“数据加载”：
您的div组件）
axios

调用是异步的。

wait

关键字并不意味着“等待此操作完成”。它是

async/await

机制的承诺管理的一部分。调用仍然是异步的，因此在HTTP请求完成之前，“文章”将不可用。@Pointy那么我应该使其同步吗？据我所知，axios API始终是异步的。我选择了第一个解决方案，但它在first son不起作用。我添加了如下反索引：

，然后工作。所以非常感谢你！很高兴我能帮忙：）