onChange 不适用于文本字段中的第一个输入

Question

onChange 事件不会返回文本输入的第一个更改，但适用于后续更改。抱歉，如果这很明显，我是 React 新手。

import React, { useState } from 'react';
import axios from 'axios'; 

function Header() {

    const [text, setText] = useState("");
    const [location, setLocation] = useState("");

    function handleChange(event) {
        setText(event.target.value);
    }

    // when submit button clicked, current state of the text input is stored inside location constant 
    function handleClick() {
        setLocation(text);
        const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + location + "&limit=5&appid={apikey}"
        function getCoordinates(url) {
            axios.get(url).then((response) => {
                const locationLat = response.data[0].lat;
                const locationLon = response.data[0].lon;
                
            });
        } 
        getCoordinates(geoCoderURL);        
    }
    return (
        <div>
            <h1>Five Day Forecast</h1> 
            <input onChange={handleChange} type="text" name="name"autoFocus placeholder="Enter location here."/>
            <button type="submit" onClick={handleClick}>Forecast</button> 
        </div>
    )
}

export default Header;

Answer 1

当您调用 setLocation(text); 时，handleClick 将在 location 值实际更新之前完成执行。

不需要 location 和 setLocation；看起来也许 location 应该与 text 相同。

function handleClick() {
    const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid={apikey}"
    function getCoordinates(url) {
        axios.get(url).then((response) => {
            const locationLat = response.data[0].lat;
            const locationLon = response.data[0].lon;  
        });
    } 
    getCoordinates(geoCoderURL);        
}