小编Arm*_*anK的帖子

我的问题是，react-leaflet<MapContainer>并不以我动态设置的位置为中心。基本逻辑是，我有一个表单，在其中输入街道和门牌号，然后调用 Nominatim 并获取一些 JSON 格式数据，从中提取建筑物的纬度和经度。这些经纬度我传递给我的<MapContainer>，但它无论如何都没有回应。使用react-leaflet v2它工作得很好，但是在我更新到v3之后它就停止了。

每当我设置默认位置值时，MapContainer 都会以该位置为中心。但是，当我通过 Nominatim 调用动态传递另一个值时，它不起作用。

我在这里呼吁提名：

const getSearchData = async () => {
    const exampleReq = `https://nominatim.openstreetmap.org/search/${query}?format=json&building=*&addressdetails=1&limit=1&polygon_geojson=1`;
    const response = await fetch(exampleReq);
    const data = await response.json();
    // console.log(data);
    if (data === undefined || data.length === 0) {
        // array empty or does not exist
        console.log("data array is empty");
        alert("Given address unrecognized! Try again please.")
        setLatitude(DEFAULT_LATITUDE);
        setLongitude(DEFAULT_LONGITUDE);
    }else{
        setLatitude(data[0].lat);
        setLongitude(data[0].lon);
    }
};

这是我的表单的提交：

<form className={style.searchForm} onSubmit={e => {
                e.preventDefault();
                setQuery(street + …