0

Image of simulator

Whenever it hits the point where an aircraft gets off of the map, and setState becomes false, it causes the setstate array filter to activate. This is causing many, if not all of the objects in the array to be removed from the screen / list on the right

    const [location, setLocation] = useState(flightData.coordinate);
    const [currentState, setState] = useState(true);
    useEffect(() => {
        if(currentState === false) {
            setFlight(flights.filter(item => item.flightId !== flightData?.flightId));
        }
        const interval = setInterval(() => {
            setLocation({...location, x: (location.x+(1*Math.cos(Math.PI/180*flightData?.heading))), y: location.y+(1*Math.sin(Math.PI/180*flightData?.heading))});
            if (location.x < -5 || location.y < 0 || location.x > 105 || location.y > 150) {
                setState(false);
            }
          }, 1000);
          return() => clearInterval(interval);
        }, [location, flightData.heading, flights]);
        return(
        <AircraftWrapper 
        data-testid="aircraft"
        style={{left: `${getXPosition(location?.x)}`, top: `${getYPosition(location?.y)}`}}
        heading={flightData?.heading+85}
        />
    )
}```

flightData is the specific data for each flight being passed down.

flights is the total array of all of the flights being passed down in order to remove the specific flight from the array once it hits a state of false.
setFlight is the setState function from where flights is initialized being passed down in order to manipulate the total flights array.

The error I am seeing is that when the setFlight filter goes off, if the flight has the an index lower than other flights it is removing all flights after it. If it is at the end of the array, it is only removing itself.
If it
kyleo21
  • 3
  • 2
  • I realized, the only time it is removing EVERY plane is when a plane that spawned first is removed while there are other planes at the end of the array. so if it goes [plane1,plane2,plane3] and plane 3 gets removed, plane 3 is only removed. if plane1 is removed after with plane2 still there, plane 1 and plane 2 get removed. Does anyone know how I can solve this? – kyleo21 Apr 27 '22 at 16:47
  • Could you post more information? For instance, what info does your `flightData` store and how does it get changed? – gloo Apr 27 '22 at 16:50
  • @gloo I just updated my main post with information on them. flightData does not get changed and is stored in the flights array. flightData is the data being mapped here. ```{flights.map((flight) => { return ( ``` – kyleo21 Apr 27 '22 at 16:55
  • can u push your code on github? – Hiba Youssef Apr 27 '22 at 17:57

1 Answers1

0

Your [currentState, setState] logic is unnecessary, and you can replace your setState(false) with setFlight(flights.filter(item => item.flightId !== flightData?.flightId)) which will help with some of the extra re-renders and should also solve your problem of removing all the flights to the right of the index of the flight that moved off the map in your flights array. However, there is another problem.

The reason why your existing code is not working has to do with your map function over your flights array (I'm guessing that's what you use here since you did not provide the code for that). You may have seen a warning like:

"Warning: Each child in a list should have a unique "key" prop."

You likely did not provide a key for each flight in your array, or you simply used the index as the key. This is an anti-pattern in React for the exact reason you just saw. React identifies DOM elements by their key. When flightX moves off the map and its currentState changes to false, it is removed from the flights array. Every flight at a greater index in the array has their key and index decremented at this time. So flightX+1 becomes flightX, with currentState = false, so it is removed, and the process repeats until every flightX...n is removed.

By removing the [currentState, setState] logic, the flight is removed from the array at the same time that it moves off the map, so it should prevent the extra removal of the flights. However, the location for each flight will probably still be incorrect until you add a key. flightId should be sufficient as long as it is unique.

Here are some additional resources for keys in React lists:

Understanding unique keys for array children in React.js

https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/

https://dev.to/shiv1998/why-not-to-use-index-as-key-in-react-lists-practical-example-3e66

https://vhudyma-blog.eu/react-antipatterns-index-as-a-key/

gloo
  • 681
  • 2
  • 12