Question

我是本机反应的新手，我尝试使用 useState 更新 websocket onmessage 中的数组，但值从未更新过。

 const ws = useRef(null);
 const [marker, setMarker] = useState([]); 

 useEffect(() => {    

  if(ws.current==null)
  {
    ws.current = new ReconnectingWebSocket("ws://192.168.0.127:443/");
    ws.current.onmessage = receiveMsg;
  }

  ws.current.onopen = () => {
    // connection opened
    //ws.send('something'); // send a message
  };
  
  ws.current.onmessage = (e) => {
    // a message was received
    var mainStr = JSON.parse(e.data);
    var loc = mainStr.Location.split(',');
    // From is sender ID
    //var obj = JSON.parse(mainStr.From);
    var itemsArray = [...marker];        
    var exist=false;
    for (var i=0;i<itemsArray.length;i++)
    {
        if(itemsArray[i].mobileID==mainStr.From){
          exist=true;
          var lat=parseFloat(loc[0]);
          var long=parseFloat(loc[1]);
          itemsArray[i].coordinates.latitude=lat;
          itemsArray[i].coordinates.longitude=long;
        }
    } 

    if(!exist){
    var temp={title :'Hello',
    mobileID: mainStr.From,
    coordinates: {
      latitude: parseFloat(loc[0]),
      longitude: parseFloat(loc[1])
    },}
      itemsArray.push(temp);
    }      
    setMarker(itemsArray);
    console.log(e.data);
  };
  
  ws.current.onerror = (e) => {
    // an error occurred
    console.log(e.message);
  };
  
  ws.current.onclose = (e) => {
    // connection closed
    console.log(e.code, e.reason);
    //setwsIsconnected(false);
    wsIsconnected=false;
  };

    },[]);

    const addMarker=()=>{
      var itemsArray = [...marker];
      var temp={title :'Hello AA',
      mobileID: 'default',
      coordinates: {
        latitude: 3.046787,
        longitude: 101.63861
      },}
      itemsArray.push(temp);   
      temp={title :'Hello BV',
      mobileID: 'default',
      coordinates: {
        latitude: 3.048987,
        longitude: 101.62861
      },}
      itemsArray.push(temp);    
      setMarker(itemsArray);
    }
return (

<>
 <View style={styles.container}>
 <MapView onRegionChangeComplete={onRegionChangeComplete}
   ref={(map1) => setMap(map1)}
   initialRegion={{
    latitude: 3.046787,
    longitude: 101.62861,
    latitudeDelta: 0.01,
    longitudeDelta: 0.1,
  }}
   provider={PROVIDER_GOOGLE} // remove if not using Google Maps
   style={styles.map}
   rotateEnabled={false}
   scrollEnabled
   zoomEnabled
   showsUserLocation={true}
   showsMyLocationButton={false}       
  >      
  {marker.map( (marker,index) => (
    <MapView.Marker key={index}
      coordinate={marker.coordinates}
      title={marker.title}
      image={{uri: 'http://indoormap.seedrawex.com//AllM/Models/greenLocation.png'}}
    />
    ))
  }         
      <Text>
        {lat} , {longi}
      </Text>
 </MapView>
 <Button
    title="My Location"
    onPress={centerMap}
  />
    <Button
    title="Add Marker"
    onPress={addMarker}
  />

我尝试将 onPress 事件绑定到函数“addMarker”以手动将标记数据添加到数组中使用 setMarker 并且它工作正常。如果我尝试在 onmessage 函数中使用 setMarker 添加数组，它只会清空现有数据，而不会将数据添加到数组中，我还会在监视窗口中检查标记内容，即使我刚刚添加了标记，它也会显示空元素之前调用 addMarker。似乎出现在 onmessage 中的标记对象在不同的函数范围内运行。请告诉我我哪里做错了？提前致谢！

useState 无法更新 WebSocket 的 onmessage 事件中的数组

0 个答案: