useState 不更新状态

Question

我正在尝试使用 useState 挂钩更新状态，但状态不会更新。我已经检查过如何修复它，但真的不知道是什么原因导致了这一点。这是我没有包含 url 和导入文件的整个代码...

当 onchange 方法触发 ilceZoom 函数事件有值时，我可以得到它

const ilceUrl = 'URL';


const AddressSearchMaks = (props) => {
    useEffect(() => {
        ilceLoad();
    }, []);

    const [ ilceler, setIlceler ] = useState([]);
    const [ selectedIlce, setSelectedIlce ] = useState(null);


    let queryTask;
    let query;
    let sfs;
    let lineSymbol;
    let polygon;
    let polyline;
    let graphic;
    let extent;
    let point;
    let wMercatorUtils;
    let rfConverter;

    loadModules([
        'esri/tasks/query',
        'esri/tasks/QueryTask',
        'esri/symbols/SimpleFillSymbol',
        'esri/symbols/SimpleLineSymbol',
        'esri/geometry/Polygon',
        'esri/geometry/Polyline',
        'esri/geometry/webMercatorUtils',
        'esri/geometry/Extent',
        'esri/geometry/Point',
        'esri/graphic',
        'esri/Color',
        'libs/ReferenceConverter'
    ]).then(
        (
            [
                Query,
                QueryTask,
                SimpleFillSymbol,
                SimpleLineSymbol,
                Polygon,
                Polyline,
                webMercatorUtils,
                Extent,
                Point,
                Graphic,
                Color,
                referenceConverter
            ]
        ) => {
            queryTask = QueryTask;
            query = Query;
            polygon = Polygon;
            polyline = Polyline;
            graphic = Graphic;
            extent = Extent;
            point = Point;
            wMercatorUtils = webMercatorUtils;
            rfConverter = referenceConverter;
            sfs = new SimpleFillSymbol(
                SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([ 0, 255, 255 ]), 4),
                new Color([ 140, 140, 140, 0.25 ])
            );
            lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([ 0, 255, 255 ]), 4).setWidth(4);
        }
    );

    const getAdres = async (url) => {
        let response = await fetch(url);
        let data = await response.json();
        let list = [];
        data.AdresList.Adresler.Adres.forEach((item) => {
            list.push({
                label: item.ADI,
                value: item.ID,
                lat: item.LAT,
                lon: item.LON
            });
        });
        return list;
    };

    async function ilceLoad() {
        let ilceList = await getAdres(ilceUrl);
        setIlceler(ilceList);
    }

    const convertExtent = (lat, lon) => {
        let p;
        let ext;
        const sr = props.map.spatialReference;
        if (sr.wkid == 102100) {
            const _p = wMercatorUtils.lngLatToXY(lon, lat);
            ext = extent({
                xmin: _p[0],
                ymin: _p[1],
                xmax: _p[0],
                ymax: _p[1],
                spatialReference: props.map.spatialReference
            });
        } else {
            const res = rfConverter.WgsToItrf(lat, lon);
            ext = extent({
                xmin: res.x,
                ymin: res.y,
                xmax: res.x,
                ymax: res.y,
                spatialReference: props.map.spatialReference
            });
            p = point(res.x, res.y);
        }
        p.spatialReference = sr;
        return ext;
    };

    const ilceZoom = (evt) => {
        setSelectedIlce(evt.value);
        console.log('selectedIlce', selectedIlce);
        setError(false);
        console.log('error', error);
        const qTask = queryTask(maksIlce);
        const q = query();
        q.returnGeometry = true;
        q.outFields = [ '*' ];
        q.outSpatialReference = { wkid: 5254 };
        q.where = `KIMLIKNO=${evt.value}`;
        qTask.execute(q, (evt) => {
            const polyGon = polygon({
                rings: evt.features[0].geometry.rings
            });
            props.map.graphics.add(graphic(polyGon, sfs));
        });
        const extent = convertExtent(evt.lat, evt.lon);
        props.map.setExtent(extent);
        mahalleLoad();
    };



    return (

            <Select name='adresSelect' options={ilceler} onChange={(e) => ilceZoom(e)} placeholder='İlçe Seçiniz' />

    );
};

const mapStateToProps = (state) => ({
    map: state.map.map
});

export default connect(mapStateToProps, null)(AddressSearchMaks);

Answer 1

可能与某些环境绑定问题有关。尝试使用 setState 作为函数：

useEffect(() => {
        ilceLoad();
    }, []);

    const [ ilceler, setIlceler ] = useState([]);
    const [ selectedIlce, setSelectedIlce ] = useState(null);

async function ilceLoad() {
        let ilceList = await getAdres(ilceUrl);
        setIlceler(ilceList); // update the state, it works here 
    }

const ilceZoom = (evt) => {
        setSelectedIlce(prev => {
          console.log("prev: ", prev);
          console.log("evt.value: ", evt.value);
          return evt.value;
        }); 
        const qTask = queryTask(url);
        const q = query();
        q.returnGeometry = true;
        q.outFields = [ '*' ];
        q.outSpatialReference = { wkid: 5254 };
        q.where = `VARIABLE NAME=${evt.value}`;
        qTask.execute(q, (evt) => {
            const polyGon = polygon({
                rings: evt.features[0].geometry.rings
            });
            props.map.graphics.add(graphic(polyGon, sfs));
        });
        const extent = convertExtent(evt.lat, evt.lon);
        props.map.setExtent(extent);
    };

Answer 2

你可以这样试试。因为，在您的代码中，您在 selectedIlce 中设置数据，但在重新渲染之前，您尝试检查控制台中的值，所以最好在事件函数之外使用您的控制台，这样当它更新时，它会反映在控制台中。

    console.log('selectedIlce', selectedIlce);
    const ilceZoom = (evt) => {
       setSelectedIlce(evt.value);
       ....
    }