CODEWITHSUNDEEP
reactjs
RussellHarrower
RussellHarrower

Reputation: 6820

ReactJS reset setData

I have a function that needs to refresh data. The issue I am having is that I can't seem to unload and reload

const [data, setData] = useState('');

Seems that by adding

 useEffect(() => {
         setData();
      });

it does not allow for the setData to be removed so I can reuse.

export default function Mapy({ items }) {
    const [viewport, setViewport] = useState({
        latitude: -31,
        longitude: 115.85,
        width: "100vw",
        height: "100vh",
        zoom: 10
      });

      const [data, setData] = useState('');
      useEffect(() => {
         setData();
      });
      const layerStyle = {
        id: "data",
        type: "fill",
        paint: {
          "fill-color": "#ff0000",
          "fill-opacity": 0.5
        }
      };
      const viewportChange = viewports => {
        setViewport(viewports);
      };
    
      useEffect(() => {
       
        // "https://nominatim.openstreetmap.org/lookup?osm_ids=R11689210,R11689151&polygon_geojson=1&bbox=0&format=geojson",
        var array = []
        var ids=items.filter(Boolean);
        ids.map((id, index) => {
           array[index] = "R"+id.id;
        })
        console.log("https://nominatim.openstreetmap.org/lookup?osm_ids="+array.toString()+"&polygon_geojson=1&bbox=0&format=geojson")
       // alert(array.toString());
        requestJson(
          "https://nominatim.openstreetmap.org/lookup?osm_ids="+array.toString()+"&polygon_geojson=1&bbox=0&format=geojson",
          (error, response) => {
            if (!error) {
              
              loadData(response);
            }
          }
        );
      }, []);
    
      const loadData = data => {
        setData(data);
      };
    
      return (
        <div>
            <Map
             initialViewState={{
                latitude: -31.85,
                longitude: 115.85,
                zoom: 8
              }}
            style={{width: '100vw', height: '100vh'}}
            mapStyle="mapbox://styles/mapbox/dark-v9"
            mapboxAccessToken="APIKEY"
            onViewportChange={viewportChange}
            > <Source type="geojson" data={data}>
            <Layer {...layerStyle} />
          </Source></Map>
          
        </div>
      );
    }

Upvotes: 0

Views: 296

Answers (2)

Eisa Rezaei
Eisa Rezaei

Reputation: 563

If you want to reset your data you should change your code to this:

 useEffect(() => {
         setData('');
      },[]);

it's going to reset your data state in the first mounting of your component. If you want to reset your state based on some other states just add the state to your useEffect array of dependences.

Upvotes: 1

Anil
Anil

Reputation: 31

As API call you are making on mount of the component you don't need to reset initially. as in when you get a data from then you jest set the new data in setData it will reset and update the new data.

export default function Mapy({ items }) { const [viewport, setViewport] = useState({ latitude: -31, longitude: 115.85, width: "100vw", height: "100vh", zoom: 10 });

  const [data, setData] = useState([]);
  // useEffect(() => {
  //    setData();
  // });
  const layerStyle = {
    id: "data",
    type: "fill",
    paint: {
      "fill-color": "#ff0000",
      "fill-opacity": 0.5
    }
  };
  const viewportChange = viewports => {
    setViewport(viewports);
  };

  useEffect(() => {
   
    // "https://nominatim.openstreetmap.org/lookup?osm_ids=R11689210,R11689151&polygon_geojson=1&bbox=0&format=geojson",
    var array = []
    var ids=items.filter(Boolean);
    ids.map((id, index) => {
       array[index] = "R"+id.id;
    })
    console.log("https://nominatim.openstreetmap.org/lookup?osm_ids="+array.toString()+"&polygon_geojson=1&bbox=0&format=geojson")
   // alert(array.toString());
    requestJson(
      "https://nominatim.openstreetmap.org/lookup?osm_ids="+array.toString()+"&polygon_geojson=1&bbox=0&format=geojson",
      (error, response) => {
        if (!error) {
          
          setData(response);
        }
      }
    );
  }, []);

  // const loadData = data => {
  //   setData(data);
  // };

  return (
    <div>
        <Map
         initialViewState={{
            latitude: -31.85,
            longitude: 115.85,
            zoom: 8
          }}
        style={{width: '100vw', height: '100vh'}}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxAccessToken="APIKEY"
        onViewportChange={viewportChange}
        > <Source type="geojson" data={data}>
        <Layer {...layerStyle} />
      </Source></Map>
      
    </div>
  );
}

Upvotes: 1

Related Questions