React setState()

kawishabbas — Sat, 11 Dec 2021 18:46:49 GMT
I am using esri-loader for React App. When i pass graphic to state it is not showing in my console it give blank array.
can any one guide me where i am going to mistake.
Consider line N0. 102 and 176
import React from 'react'
import { loadModules } from 'esri-loader';
import Axios from 'axios';

export default class Database extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            capacity: ['96F'],
            comment: ['kawish'],
            placement: ['buried'],
            pop: ['2100360'],
            geom:[]

        }
        this.button = React.createRef()
        this.line_button = React.createRef()
    }

    componentDidMount() {

         let view = this.props.view
        let graphic

        loadModules(["esri/widgets/Sketch","esri/tasks/support/Query", "esri/tasks/QueryTask", 'esri/widgets/Expand',
            "esri/Graphic", "esri/views/draw/Draw", "esri/geometry/geometryEngine", "esri/layers/GraphicsLayer"
        ])
            .then(([Sketch, Query, QueryTask, Expand, Graphic, Draw, geometryEngine, GraphicsLayer]) => {


                view.ui.add(this.button.current, 'top-left')

                // add the button for the draw tool
                view.ui.add(this.line_button.current, "top-left");

                const draw = new Draw({
                    view: view
                });

                // draw polyline button
                this.buttonClick = (e) =>{
                    // view.graphics.removeAll();

                    // creates and returns an instance of PolyLineDrawAction
                    const action = draw.create("polyline");

                    // focus the view to activate keyboard shortcuts for sketching
                    view.focus();

                    // listen polylineDrawAction events to give immediate visual feedback
                    // to users as the line is being drawn on the view.
                    action.on(
                        [
                            "vertex-add",
                            "vertex-remove",
                            "cursor-update",
                            "redo",
                            "undo",
                            "draw-complete"
                        ],
                        updateVertices
                    );
                }
            

                // Checks if the last vertex is making the line intersect itself.
                function updateVertices(event) {
                
                    // create a polyline from returned vertices
                    if (event.vertices.length > 1) {
                        const result = createGraphic(event);

                        // if the last vertex is making the line intersects itself,
                        // prevent the events from firing
                        if (result.selfIntersects) {
                            event.preventDefault();
                        }
                    }
                }

                // create a new graphic presenting the polyline that is being drawn on the view
                const createGraphic =  (event) =>{
                    const vertices = event.vertices;
                    view.graphics.removeAll();

                    // a graphic representing the polyline that is being drawn
                     graphic = new Graphic({
                        geometry: {
                            type: "polyline",
                            paths: vertices,
                            spatialReference: view.spatialReference
                        },
                        symbol: {
                            type: "simple-line", // autocasts as new SimpleFillSymbol
                            color: [4, 90, 141],
                            width: 4,
                            cap: "round",
                            join: "round"
                        }
                    });
                    this.setState({
                        geom:graphic.geometry
                    })
                
                    // check if the polyline intersects itself.
                    const intersectingSegment = getIntersectingSegment(graphic.geometry);

                    // Add a new graphic for the intersecting segment.
                    if (intersectingSegment) {
                        view.graphics.addMany([graphic, intersectingSegment]);
                    }
                    // Just add the graphic representing the polyline if no intersection
                    else {
                        view.graphics.add(graphic);
                    }

                    // return intersectingSegment
                    return {
                        selfIntersects: intersectingSegment
                    };
                }

                // function that checks if the line intersects itself
                function isSelfIntersecting(polyline) {
                    if (polyline.paths[0].length < 3) {
                        return false;
                    }
                    const line = polyline.clone();

                    //get the last segment from the polyline that is being drawn
                    const lastSegment = getLastSegment(polyline);
                    line.removePoint(0, line.paths[0].length - 1);

                    // returns true if the line intersects itself, false otherwise
                    return geometryEngine.crosses(lastSegment, line);
                }

                // Checks if the line intersects itself. If yes, change the last
                // segment's symbol giving a visual feedback to the user.
                function getIntersectingSegment(polyline) {
                    if (isSelfIntersecting(polyline)) {
                        return new Graphic({
                            geometry: getLastSegment(polyline),
                            symbol: {
                                type: "simple-line", // autocasts as new SimpleLineSymbol
                                style: "short-dot",
                                width: 3.5,
                                color: "yellow"
                            }
                        });
                    }
                    return null;
                }

                // Get the last segment of the polyline that is being drawn
                function getLastSegment(polyline) {
                    const line = polyline.clone();
                    const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
                    const existingLineFinalPoint = line.getPoint(
                        0,
                        line.paths[0].length - 1
                    );

                    return {
                        type: "polyline",
                        spatialReference: view.spatialReference,
                        hasZ: false,
                        paths: [
                            [
                                [existingLineFinalPoint.x, existingLineFinalPoint.y],
                                [lastXYPoint.x, lastXYPoint.y]
                            ]
                        ]
                    };
                }
               console.log(this.state.geom)
            });
    }

    save = async (e) =>{
        //console.log(e)
        const params = new URLSearchParams();
        params.append('capacity', 'haseeb');
        params.append('comment', this.state.comment);
        params.append('placement', this.state.placement);
        params.append('pop', this.state.pop);
       // params.append('geom', this.state.geom);
    
        await Axios.post("http://localhost:8080/post", params)
            .then(response => console.log(response.data))
            .catch((err) => console.log(err));
    }
    render() {
        return (
            <div>
                <div
                    ref={this.line_button}
                    class="esri-widget esri-widget--button esri-interactive"
                    title="Draw polyline"
                    onClick={(e) => this.buttonClick(e)}
                >
                    <span class="esri-icon-polyline"></span>
                </div>
                <form>
                    <label>Capacity</label>
                    <input type="text" />

                    <label>Comment</label>
                    <input type="text" />

                    <label>Placement</label>
                    <input type="text" />

                    <label>POP</label>
                    <input type="text" />

                    <label>Geometry</label>
                    <input type="text" /><br />

                    <button ref={this.button} onClick={this.save}>Save</button>

                </form>

            </div>


        )

    }

}

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
topic React setState() in ArcGIS JavaScript Maps SDK Questions

React setState()
