时间戳

首页 > 解决方案 > 使用 useState 设置状态会在第一次调用时产生空数组

reactjs - 使用 useState 设置状态会在第一次调用时产生空数组

问题描述

我正在使用该google-map-react组件，并且正在尝试设置用户单击的位置的坐标。我有坐标，但是当我第一次点击地图（点击事件被触发）时，数组coordinates返回一个空数组。

这会导致奇怪的行为，每次点击都会返回上一次点击的坐标？谁能看到这里发生了什么？

const Map = ({ center, zoom}) => {

    const [ coordinates, setCoordinates ] = useState([]);

    const onMapClick = ({ lat, lng }) => {
        setCoordinates([lat, lng]);
        console.log(coordinates)
    };

    return (
        <div className="map">
            <GoogleMapReact 
                bootstrapURLKeys={{ key: 'redacted' }}
                defaultCenter={center}
                defaultZoom={zoom}
                onClick={onMapClick}
            />
        </div>
    );
};

Map.defaultProps = {
    center: {
        lat: 53.3439,
        lng: 33.0622
    },
    zoom: 5
}

该行为正在记录以下内容

[]
(2) [51.13790387040561, -11.71807343750003]
(2) [47.709656855536565, 2.1686453124999705]

第二个日志应该在位置 1，第三个日志应该在位置 2。

标签： reactjsstateuse-stategoogle-map-react

解决方案

useState 上有一个异步行为。您的 console.log() 将显示旧的。因为状态还没有更新。但是如果你把你的 console.log() 放在 useEffect 中

useEffect(() => {
 console.log(coordinates)
}, [coordinates])

您将看到它在 onClick 事件之后正确显示。

您的代码工作正常。你可以把你的坐标状态放在你想使用它们的地方。

推荐阅读