我有一个使用txt = importlib.resources.read_text(__package__, 'a.txt')
img = importlib.resources.read_binary(__package__, 'b.png')
并使用useState组件的功能组件。我有一个使用onLoad函数在地图上初始化自定义控件的地图（带有click事件）。然后，我在此click事件中设置状态。第一次可以使用，但是之后每次都不会切换值。
功能组件：
@react-google-maps/api用户第一次按下地图上的按钮时，会将import React, { useCallback } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';
export default function MyMap(props) {
const [radiusDrawMode, setRadiusDrawMode] = React.useState(false);
const toggleRadiusDrawMode = useCallback((map) => {
map.setOptions({ draggableCursor: (!radiusDrawMode) ? 'crosshair' : 'grab' });
setRadiusDrawMode(!radiusDrawMode);
}, [setRadiusDrawMode, radiusDrawMode]); // Tried different dependencies.. nothing worked
const mapInit = useCallback((map) => {
var radiusDiv = document.createElement('div');
radiusDiv.index = 1;
var radiusButton = document.createElement('div');
radiusDiv.appendChild(radiusButton);
var radiusText = document.createElement('div');
radiusText.innerHTML = 'Radius';
radiusButton.appendChild(radiusText);
radiusButton.addEventListener('click', () => toggleRadiusDrawMode(map));
map.controls[window.google.maps.ControlPosition.RIGHT_TOP].push(radiusDiv);
}, [toggleRadiusDrawMode, radiusDrawMode, setRadiusDrawMode]); // Tried different dependencies.. nothing worked
return (
<LoadScript id="script-loader" googleMapsApiKey="GOOGLE_API_KEY">
<div className="google-map">
<GoogleMap id='google-map'
onLoad={(map) => mapInit(map)}>
</GoogleMap>
</div>
</LoadScript>
);
}
设置为radiusDrawMode，并为地图设置正确的光标（十字准线）。此后每次单击按钮不会更新true，而是保持在radiusDrawMode状态。
感谢您的帮助。
答案 0 :(得分：0)
我的猜测是，这是matchTemplate的缓存问题。尝试删除useCallback进行测试，而不进行优化。如果有效，您肯定会知道，然后您可以再次检查应该记住的内容和可能不应该的内容。
我将从useCallback中删除一个：
toggleRadiusDrawMode还可以访问const toggleRadiusDrawMode = map => {
map.setOptions({ draggableCursor: (!radiusDrawMode) ? 'crosshair' : 'grab' });
setRadiusDrawMode(!radiusDrawMode);
};
选项（使用map设置的选项）的状态吗？如果是这样，可能值得使用地图选项的实际状态，而不是创建自己的内部状态来跟踪同一事物。像这样的东西（我不太肯定会是map.setOptions）：
map.options我也怀疑这是问题所在，但看起来您似乎缺少const toggleRadiusDrawMode = map => {
const { draggableCursor } = map.options;
map.setOptions({
draggableCursor: draggableCursor === 'grab' ? 'crosshair' : 'grab'
});
};
元素上的右括号了吗？ （此外，您可能不需要在<GoogleMap>和onLoad之间创建中介函数，并且可以将mapInit直接传递给mapInit。）
onLoad答案 1 :(得分：0)
这是我最终用来解决此问题的解决方案。
我基本上不得不使用useState(false)的{{1}}退出。然后设置一个useEffect来监听引用上的更改，然后在实际的setRef(false)中设置引用值，该值会触发toggleRadiusDraw来设置实际的引用值。
useEffect不确定这是否是处理此问题的最佳方法，但希望将来对其他人有帮助。