reactjs - 口袋妖怪，API调用变量不保存

Question

我正在尝试制作一个仅显示某个口袋妖怪名称并使用 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 并将其设置为全局变量，但它似乎只是重置。注意：道具中只有一个口袋妖怪字符串，这是我要绘制的名称。

标签： reactjs

Answer 1

试试这个 ：

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