Javascript 如何在表单提交和 API 获取后执行 React 状态更新

我有一个名为SearchLocationForm.js的Reaction类组件，它是App.js的子级.在SearchLocationForm.js的内部，我有下面的代码

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
           error: null,
           isLoaded: false,
           coordinates: [] 
        }
        this.appid = this.props.appid;
    }

    handleSubmit(location) {

        fetch(
            `http://api.openweathermap.org/geo/1.0/direct?q=${location}&appid=${this.props.appid}`
        )
        .then(res => res.json())
        .then(resp => this.setState({coordinates: [resp.lat, resp.lon]}))
        .catch((error) => {
            console.error("there has been an issue with te GeoCode API Call", error)
        })

    }

    render() {
        return (
            <LocationInput className="searchLocationForm" handleSubmit={this.handleSubmit}/>
        )
    }

我正在try 弄清楚如何使用setState()方法用API响应更新组件状态，然后将其提升到App.js组件，以便进行后续调用.

我已经找到了关于这个问题的许多答案，并try 了许多解决方案，但到目前为止似乎都没有奏效.您认为在我的代码中发生了什么似乎导致了这个问题？谢谢!