Pokemon，API调用变量不保存

Question

我正在尝试制作一个程序，它只会显示某个pokemons的名称，并使用Pokeapi获取图片。但是，在我的pokeURL变量退出$.getJSON函数后，它会将自己重置为null。

import React from "react"
import $ from "jquery"

class Pokemon extends React.Component{
    constructor(props){

        super()
        this.state = {
            imageUrl: ""
        }

    }
    componentDidMount() {
        let pokeURL
        this.setState(()=>{
            $.getJSON("https://pokeapi.co/api/v2/pokemon/" + (this.props.pokemon).toLowerCase() + "/", function(data){
                pokeURL = data.sprites.front_default;
                // console.log(pokeURL)
                // console.log(data)    
            })
            // console.log(pokeURL)
            return {
                imageUrl: pokeURL
            }
        })  


    }
    render(){
        return(
            <div>
                <h1>{this.props.pokemon}</h1>
                <img src={this.state.imageUrl} height = "400px" width = "400px"/>
            </div>
        )
    }
}
export default Pokemon

我查看了我的控制台，我正在接收pokemon api调用，但它只是没有保存到一个变量。我试过使用let并将其设置为全局变量，但它似乎只是重置。注意:道具中只有一个口袋妖怪字符串，这是我想画的东西的名字。

Answer 1

试试这个：

$.getJSON("https://pokeapi.co/api/v2/pokemon/" + (this.props.pokemon).toLowerCase() + "/", function(data){
    this.setState({
        imageUrl : data.sprites.front_default;
    })
})