bounty将在2天后过期。回答此问题可获得+150声望奖励。codebot希望吸引更多人关注此问题。

在一个react应用程序里的mapboxMap里有两个图层。我都是新手。我想在一个图层可见的时候禁用另一个图层的点击。我通过react从复选框值控制每个图层的可见性。
我有这个密码

export default function Map () {   
  const [checkedLayer, setCheckedLayer] = useState(true);
  const [checkedOtherLayer, setCheckedOtherLayer] = useState(true);

  //when a checkbox is on or off make layer visible or not
  const handleVisibility = (event) => { 
    let visible ; let layer;  
    event.target.checked ? visible = 'visible' : visible = 'none'
    
    if (event.target.id === 'mylayer') { 
      setCheckedLayer(event.target.checked);   
      layer = 'mylayer';
    } 

    if (event.target.id === 'myotherlayer') { 
      setCheckedOtherLayer(event.target.checked);   
      layer = 'myotherlayer';
    } 

    map.current.setLayoutProperty(layer, 'visibility', visible); 
  }; 

useEffect(() => { 
  if (map.current) return; // initialize map only once  
   map.current = new mapboxgl.Map({
    container: mapContainer.current, 
    style: 'mapbox://styles/mapbox/satellite-streets-v11',
    center: [lng, lat],
    zoom: zoom
  });//map  

  map.current.on('load', () => { 
     //...set layers and sources 
  });//load 

  map.current.on('click', 'mylayer', (e) => {
    console.log('other layer visibility ', map.current.getLayoutProperty('myotherlayer', 'visibility'));
   // I want to do something like 
   // if map.current.getLayoutProperty('myotherlayer', 'visibility')) == 'visible' 
   // return
   // but the above console.log keeps giving "undefined"
   // map.current.getLayoutProperty('mylayer', 'visibility') works
  }); 
     },[checkedLayer, checkedOtherLayer]);//useEffect 

  return (
    <div> 
              <Checkbox
                id="mylayer"
                checked={checkedLayer}
                onChange={handleVisibility}
                inputProps={{ 'aria-label': 'controlled' }}
              />
              <Checkbox
                id="myotherlayer"
                checked={checkedOtherLayer}
                onChange={handleVisibility}
                inputProps={{ 'aria-label': 'controlled' }}
              />
      <div ref={mapContainer} className="map-container"> </div>
    </div>
  )
}

当点击mylayer时，我尝试检查myotherlayer的可见性值，如果它是visible，则返回，因此在'click', 'mylayer'函数中不执行任何操作。但map.current.getLayoutProperty('myotherlayer', 'visibility'));的值是undefined。
我哪里做错了？
谢谢