-1

I'm using React Google Maps API, and every time that I run this function, when drag end a marker it throws the exception Cannot read properties of null (reading 'toString') if I try to run the setSelectedBusPoint() and setAdjacenteBusPoint() hook.

Here is the code:

function onDragEnd(e) {
        const lat = e.latLng.lat();
        const lng = e.latLng.lng();

        const tempBusPoints = route.direction !== "IDA E VOLTA" ? { ...busPoints } : [...busPoints];
        const tempAdjacenteBusPoints = [...adjacenteBusPoints];

        const index = tempAdjacenteBusPoints.indexOf(tempAdjacenteBusPoints.find(bp => bp.id === id));

        const draggedBusPoint = tempAdjacenteBusPoints[index];

        draggedBusPoint.state = currentDirection === "go" ? "added-go" : "added-return";
        draggedBusPoint.color = "green";
        draggedBusPoint.lat = lat;
        draggedBusPoint.lng = lng;

        if (draggedBusPoint.order === null) {
            if (orderType === "manually") {
                setSelectedBusPoint(draggedBusPoint);
            } else if (orderType === "sequencially") {
                if (currentDirection === "go") {
                    const goMaxOrder = Math.max(...tempBusPoints.goBusPoints.filter(bp => bp.order !== null).map(bp => bp.order).concat(tempAdjacenteBusPoints.filter(bp => bp.state === "added-go" && bp.order !== null).map(bp => bp.order))) + 1;

                    tempBusPoints.returnBusPoints.forEach(bp => {
                        if (bp.order !== null) {
                            bp.order += 1;
                            bp.state = bp.state === "updated" || bp.state === "normal" ? "updated" : bp.state;
                            bp.color = "green";
                        }
                    });

                    tempAdjacenteBusPoints.filter(bp => bp.order !== null && bp.state === "added-return").forEach(bp => {
                        bp.order += 1;
                    });

                    draggedBusPoint.order = goMaxOrder;

                    setOrder(Math.max(...tempBusPoints.goBusPoints.filter(bp => bp.order !== null).map(bp => bp.order).concat(tempBusPoints.returnBusPoints.filter(bp => bp.order !== null).map(bp => bp.order)).concat(tempAdjacenteBusPoints.filter(bp => bp.state === "added-go" || bp.state === "added-return" && bp.order !== null).map(bp => bp.order))) + 1);

                    setBusPoints(tempBusPoints);
                } else if (currentDirection === "return") {
                    const returnMaxOrder = Math.max(...tempBusPoints.returnBusPoints.filter(bp => bp.order !== null).map(bp => bp.order).concat(tempAdjacenteBusPoints.filter(bp => bp.state === "added-return" && bp.order !== null).map(bp => bp.order))) + 1;

                    draggedBusPoint.order = returnMaxOrder;

                    setOrder(Math.max(...tempBusPoints.goBusPoints.filter(bp => bp.order !== null).map(bp => bp.order).concat(tempBusPoints.returnBusPoints.filter(bp => bp.order !== null).map(bp => bp.order)).concat(tempAdjacenteBusPoints.filter(bp => bp.state === "added-go" || bp.state === "added-return" && bp.order !== null).map(bp => bp.order))) + 1);

                    setBusPoints(tempBusPoints);
                }
            }
            
            setAdjacenteBusPoints(tempAdjacenteBusPoints);
        } else {
        }
    }

How can I solve this error?

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
  • Show the code that throws the error – Guy Incognito May 14 '23 at 04:26
  • @GuyIncognito it is exactly this code, if you are refering to the full code is a large repository that i can't show here – JHOSEF NASCIMENTO May 14 '23 at 04:55
  • It's not possible for this code to throw a "Cannot read properties of null (reading **'toString'**)" error, there isn't any `toString` here anywhere. If you can't find the code that throws the error, at least show the full error message. The error message shows the file and line number of the error. – Guy Incognito May 14 '23 at 04:57

1 Answers1

-1

check the value of the variable first before adding the .toString prototype. or you can search for errors with try catch code

let arr = [123,"abc",false,null,undefined,NaN,[],{},,]
for(let i of arr){
  try{
   console.log(i.toString(), 'success')
   // solution `i?.toString()`
   }catch(e){
     console.log('err',i,e.message)
   }
}
perona chan
  • 101
  • 1
  • 8