反应 useState 挂钩不更新状态 onClick

Question

我在 React 中使用 useState 挂钩，当 _updateData 被点击触发时，geojson 状态不会在 <source data={geojson}> 中更新。我认为 useEffect 正在覆盖更新后的 geojson，它在 _updateData 函数中更改了 onClick。为了更新 {geojson} 的状态，我在这里缺少什么？我对 useEffect 的意图是加载初始的 goejson。谢谢你的帮助。正在使用的 Mapbox 库：https://uber.github.io/react-map-gl/#/

const Map = () => {
    const [viewport, setViewport] = useState({longitude: -98.58, latitude: 39.83, zoom: 3.5})
    const [geojson, setGeojson] = useState(null)

    useEffect(() => {
        // GeoJSON
        const locations = [];
        let ref = fire.database().ref("...").orderByKey();
        ref.once("value", snapshot => {
            snapshot.forEach(function(childSnapshot) {
                if (childSnapshot.val().Company !== "") {
                    locations.push(childSnapshot.val());
                }
                if (locations.length === 1219) {
                    var geojson = {
                        type: "FeatureCollection",
                        features: locations.map(item => {
                            return {
                                ...
                                },
                                geometry: {
                                type: "Point",
                                coordinates: [item.Long, item.Lat]
                                }
                            };
                        })
                    };
                    setGeojson(geojson);
                    return geojson;
                }
            });
        })
    });

    const _updateViewport = () => {
        setViewport(viewport)
    }

    const _updateData = () => {
        const locations = [];
        let ref = fire.database().ref("...").orderByKey();
        ref.once("value", snapshot => {
            snapshot.forEach(function(childSnapshot) {
                if (childSnapshot.val().Company !== "" && childSnapshot.val().Size === "Large") {
                    locations.push(childSnapshot.val());
                }
                if (locations.length === 232) {
                    var geojson = {
                        type: "FeatureCollection",
                        features: locations.map(item => {
                            return {
                                ...
                                },
                                geometry: {
                                type: "Point",
                                coordinates: [item.Long, item.Lat]
                                }
                            };
                        })
                    };
                    console.log(geojson);
                    setGeojson(geojson);
                    return geojson;
                }
            });
        })
    }

    return (
        <ReactMapGL
            {...viewport}
            onViewportChange={_updateViewport}
            width="100%"
            height="100%"
            mapStyle={mapStyle}
            mapboxApiAccessToken={TOKEN}>
            <Source type="geojson" data={geojson}>
                <Layer {...icon} />
            </Source>
            <div style={navStyle}>
                <NavigationControl onViewportChange={_updateViewport} />
                <button style={navStyle} onClick={_updateData}>Update</button>
            </div>
        </ReactMapGL>
    );
}

export default Map;

Answer 1

我建议你改用 useReducer 挂钩，因为 useState 在让你知道更新方面有点问题，而我不知道知道为什么吗？！

Answer 2

如果您只想第一次加载，请像这样使用 useEffect： useEffect(function,[dependency] or [])

反应 useState 挂钩不更新状态 onClick

React useState hook not updating state onClick

reactjs

mapbox-gl-js

react-component

react-state

react-map-gl