React 钩子无法从状态中获取价值

Question

谁能给我解释一下为什么这样的东西不起作用？

const [myState, setState] = React.useState<any>(undefined);


let someOnClickFunction = (e) => { 
  console.log(myState) //undefined on second click
  if(myState !== e.target) { //error myState is undefined 
    console.log("State is different from event")
  }

 setState(e.target)

}

假设我单击某些东西并触发 someOnClickEvent，myState = undefined for if 语句。 但是，当我第二次单击并触发 someOnClickEvent 时，我希望 myState = e.target 从第一次单击开始，但实际上。 myState 在第二次单击时仍未定义。我真的不明白为什么会这样。

它有点像这样被解雇：

React.useEffect(() => {
  element.on('click', someOnClickFunction)
},[myState]) 

问题的具体代码：

     React.useEffect(() => {

    new L.GeoJSON(getGeoJson(), {
      onEachFeature: function (feature, layer) {
        layer.on('click', onLayerClick);
        layer.on('pm:enable', onLayerEditingStart);
        layer.on('pm:disable', onLayerEditingDisable);
        layer.on('pm:update', onLayerEdited);
      }
    }).addTo(features).setStyle({weight: 8});
  }, [mapRef, selectedLayer]);


      let onLayerClick = (e) => {

      if(!(selectedLayer instanceof L.Marker)) { //need this if to have valueof selectedLayer
        selectedLayer.setStyle({color: '#3388ff', weight: 5})
      }
      console.log("selected before")
      console.log(selectedLayer) //undefined -- expected value from last click
      //selectedLayer = e.target;
      setSelectedLayer(e.target)
      console.log("selected after")
      console.log(selectedLayer) //still undefined -- expected value from state set 2 lines above.
  };

Answer 1

状态变化是异步的

要遵循它，您可以使用 useEffect

React.useEffect(()=>{
    console.log("in useEffect ",myState)
},[myState])