1

当函数size.value触发. 例如，假设开始的 defaultValue 选项为“All”，为空...该选项更改为“Medium”，为“All”...该选项更改为“Large”，为“Medium”。 ..等等。最初我希望该函数在选择“All”的情况下运行 onload 也不起作用，它会引发错误 Cannot read property 'target' of undefined on 。我在这里做错了什么？谢谢您的帮助。_updateData<select><select>locationslocationslocations_updateDatasetSize({value: event.target.value})

const Map = () => {
    const [viewport, setViewport] = useState({longitude: -98.58, latitude: 39.83, zoom: 3.5})
    const [locations, setLocations] = useState([])
    const [geojson, setGeojson] = useState(null)
    const [size, setSize] = useState({value: "All"})

    useEffect(() => {
        setLocations(geodata)
        _updateData()
    }, []);

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

    const _updateData = event => {
        setSize({value: event.target.value})
        const tempLocations = [];
        locations.forEach(function(res) {
            if (size.value === "All") {
                tempLocations.push(res);
            } else if (res.Size === size.value) {
                tempLocations.push(res);
            }
        });
        var data = {
            ...
        };
        setGeojson(data);
    }

    return (
        <ReactMapGL
            {...viewport}
            onViewportChange={_updateViewport}
            width="100%"
            height="100%"
            mapStyle={mapStyle}
            mapboxApiAccessToken={TOKEN}>
            <Source id="my-data" type="geojson" data={geojson}>
                <Layer {...icon} />
            </Source>
            <div style={navStyle}>
                <NavigationControl onViewportChange={_updateViewport} />
                <select onChange={_updateData} defaultValue={size}>
                    <option value="All">All</option>
                    <option value="Large">Large</option>
                    <option value="Medium">Medium</option>
                    <option value="Small">Small</option>
                    <option value="Very Small">Very Small</option>
                </select>
            </div>
        </ReactMapGL>
    );
}

export default Map;
4

2 回答 2

1

是的，您onChange在挂载useEffect钩子中调用您的选择处理程序，没有事件对象来取消引用target属性。我会将其余updateData代码分解出来，以便您可以使用初始状态值调用它。这将允许您使用初始大小状态日期更新安装位置的详细信息，并且选择的onChange将保持以前的状态。

注意：您应该注意，状态更新在下一个渲染周期之前不会生效，因此在您的代码中您setSize使用新值调用但继续处理当前大小值的位置，因此您需要转发当前值。

const Map = () => {
    const [viewport, setViewport] = useState({longitude: -98.58, latitude: 39.83, zoom: 3.5})
    const [locations, setLocations] = useState([])
    const [geojson, setGeojson] = useState(null)
    const [size, setSize] = useState({value: "All"}) // initial size state here

    useEffect(() => {
        setLocations(geodata);
        updateLocationData(size.value); // call the location updater on mount with the initial size state value
    }, []);

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

    const _updateData = event => {
        setSize({value: event.target.value})
        updateLocationData(event.target.value); // forward current size value
    }

    const updateLocationData = (sizeValue) => { // forwarded size value
        const tempLocations = [];
        locations.forEach(function(res) {
            if (sizeValue === "All") { // forwarded size value for comparison
                tempLocations.push(res);
            } else if (res.Size === sizeValue) { // forwarded size value for comparison
                tempLocations.push(res);
            }
        });
        var data = {
            ...
        };
        setGeojson(data);
    };

    return (
        <ReactMapGL
            {...viewport}
            onViewportChange={_updateViewport}
            width="100%"
            height="100%"
            mapStyle={mapStyle}
            mapboxApiAccessToken={TOKEN}>
            <Source id="my-data" type="geojson" data={geojson}>
                <Layer {...icon} />
            </Source>
            <div style={navStyle}>
                <NavigationControl onViewportChange={_updateViewport} />
                <select onChange={_updateData} defaultValue={size.value}> // need to unpack the actual size value
                    <option value="All">All</option>
                    <option value="Large">Large</option>
                    <option value="Medium">Medium</option>
                    <option value="Small">Small</option>
                    <option value="Very Small">Very Small</option>
                </select>
            </div>
        </ReactMapGL>
    );
}

export default Map;
于 2020-01-01T07:57:53.847 回答
0

首先，useState 函数是异步的。因此需要一些时间来更新。请参阅useState 是否同步？. 其次，在组件挂载时调用 useEffect 函数。所以还没有发生 onchange 事件。一旦您更改了选择标签中的选项，就会发生 Onchange 事件。只需从您的 useEffect 函数中删除 _updateData 即可。

于 2020-01-01T07:55:43.713 回答