React problem z KNN

Question

Witam,

Mam problem z moim kodem i nie za bardzo wiem jak go rozwiązać. Kod działa poprawnie do momentu wywołania funkcji "Knn". Wówczas wybranie innego punktu lub zaczęcie pisania w formularzu x lub y zmienia wartość punktów. Obstawiam, że problem wynika w funkcji "Canvas" bo tylko tam mnożę y * -1. Nie za bardzo wiem jak się przed tym uchronić.

Kod z powodu na długość zamieściłem tutaj: https://pastebin.com/hiWqPygG

Screen obrazujący mój problem:

Za każdą pomoc bardzo dziękuję 

Answer 1

Tak powinno działać ;) 

  const draw = (ctx, start_point, scale) => {
    points.forEach( item => {
      const y = parseInt(item.y) * -1; 
      ctx.lineTo(item.x * scale + start_point[0], y * scale + start_point[1]);
    })
  }

Problemem jest to że tablice i obiekty są przekazywane przez referencje. I modyfikujesz obiekt do którego odnoszą się te referencje. Aby się zabezpieczyć przed nadpisaniem sobie wartości można zamrozić sobie obiekt :) 

  AddToPoints = () => {
    const newPoint = Object.freeze({
      id: _uniqueId(),
      x: this.state.x,
      y: this.state.y
    });
 
    this.setState({
      points: [...this.state.points, newPoint]
    })
  }

Gdy masz ustawiony 

'use strict';

To podczas zmiany wartości przeglądarka rzuci błędem. Łatwiej będzie znaleźć problem ;) 

PS.
- usunąłbym x i y z state App i dodał bym je do state komponentu InsertForm (poczytaj o useState).
- komponent ShowList zwraca nie prawidłową wartość brakuje tam React.Fragment czyli <></>