Javascript unsplash中的Reactjs api数据未存储在this.state.photos中，但正在控制台上注销

当我在componentDidMount中调用unsplash api时，api调用后this.state.photos数据仍然未定义，但当我从控制台注销响应时，数据显示出来。你可以看到我有控制台。记录信息。（response.data和this.state.photos）。this.state.photos是未定义且未显示数据的。我正在使用ReactJS。有人知道为什么吗？请参阅下面的代码。谢谢

import React, { useState, useEffect } from "react";
import Footer from "../components/Footer";
import axios from "axios";
import NavBar from "../components/NavBar";
import AOS from 'aos';


class CountryPage extends React.Component{



    state = {
        country: null,
        photos: []
    }


    componentDidMount() {
        axios.get(`https://restcountries.eu/rest/v2/name/${this.props.match.params.name}`)
            .then(response=> {
                this.setState({
                    country: response.data[0]
                })
                console.log(this.state.country)
            })
            axios.get(`https://api.unsplash.com/search/photos?client_id=${Access_Key}&query=bike`)
            .then(response=> {
                this.setState({
                    photos: response.data[0]
                })
                console.log(response.data)
                console.log(this.state.photos)
            })
            AOS.init({
                duration: 1000
            });
    }




    render() {

        if(!this.state.country){
            return <p>Loading</p>
         }


        return(
            <div className="countryPageBack">
                <NavBar/>
                 <div className="container">
                     <div className="countryAndFlag animate__bounceIn">
                        <h1 className="countryPageTitle">{`${this.props.match.params.name} - (${this.state.country.nativeName})`}</h1>
                        <img className="countryPageFlag" src={this.state.country.flag}/>
                    </div>
                    <div data-aos="fade-left" className="countryBasics">
                        <h3 className="sectionTitle">Basic Info</h3>
                        <div className="basicDesc">{`Located in ${this.state.country.region}, ${this.state.country.name} has a population of ${this.state.country.population} people`}</div>
                        <div className="propertyName">Currency: <span className="propertyValue">{this.state.country.currencies[0].name} - {`${this.state.country.currencies[0].symbol}`}</span></div>
                        <div className="propertyName">Langauges Spoken: <span className="propertyValue">{this.state.country.languages[0].name}</span></div>
                        <div className="propertyName">Capitols: <span className="propertyValue">{this.state.country.capital}</span></div>
                    </div>
                    <div data-aos="fade-right" className="countryRegion">
                        <h3 className="sectionTitle">Regional Info</h3>
                        <div className="propertyName">Region: <span className="propertyValue">{this.state.country.region}</span></div>
                        <div className="propertyName">Subregion: <span className="propertyValue">{this.state.country.subregion}</span></div>
                        <div className="propertyName">Timezones: <span className="propertyValue">{this.state.country.timezones}</span></div>
                        <div className="propertyName">Area: <span className="propertyValue">{this.state.country.area}</span></div>
                    </div>
                    <div data-aos="fade-left" className="countryOthers">
                        <h3 className="sectionTitle">Other Info</h3>
                        <div className="propertyName">Calling Code: <span className="propertyValue">{this.state.country.callingCodes}</span></div> 
                        <div className="propertyName">Country Code: <span className="propertyValue">{this.state.country.alpha3Code}</span></div>
                        <div className="propertyName">Main Domain: <span className="propertyValue">{this.state.country.topLevelDomain}</span></div>
                    </div>                           
            </div>
            <Footer/>
            </div>

        )
    }
}

export default CountryPage;

import React，{useState，useffect}来自“React”；
从“./组件/页脚”导入页脚；
从“axios”导入axios；
从“./components/NavBar”导入导航栏；
从“AOS”导入AOS；
类CountryPage扩展了React.Component{
状态={
国家：空，
照片：[]
}
componentDidMount（）{
axios.get(`https://restcountries.eu/rest/v2/name/${this.props.match.params.name}`）
。然后（响应=>{
这是我的国家({
国家：答复。数据[0]
})
console.log（this.state.country）
})
axios.get(`https://api.unsplash.com/search/photos?client_id=${Access\u Key}&query=bike`）
。然后（响应=>{
这是我的国家({
照片：回复。数据[0]
})
console.log（response.data）
console.log（this.state.photos）
})
AOS.init({
持续时间：1000
});
}
render（）{
如果（！this.state.country）{
返回加载

}
返回(
{`${this.props.match.params.name}-（${this.state.country.nativeName}）`}
基本信息
{`位于${this.state.country.region}，${this.state.country.name}人口为${this.state.country.population}人`}
货币：{this.state.country.currences[0].name}-{`${this.state.country.currences[0].symbol}`}
语言：{this.state.country.languages[0].name}
国会大厦：{this.state.country.capital}
区域信息
地区：{this.state.country.Region}
次区域：{this.state.country.subsection}
时区：{this.state.country.Timezones}
地区：{this.state.country.Area}
其他信息
调用代码：{this.state.country.callingCodes}
国家代码：{this.state.Country.alpha3Code}
主域：{this.state.country.topLevelDomain}
)
}
}
导出默认国家/地区页面；

看起来您将错误的键设置为状态

我尝试了一个类似的调用Unsplash API（）来获取照片。我认为您应该将设置代码更改为

this.setState({
    photos: response.data.results[0]
})

如果您希望将第一张照片添加到照片中，或者如果您希望完整列表，则添加

response.data.results