React useEffect na często zmienianą tablicę obiektów

React useEffect na często zmienianą tablicę obiektów

Wątek przeniesiony 2023-09-15 11:42 z JavaScript przez Riddle.

Gouda105
  • Rejestracja:prawie 8 lat
  • Ostatnio:około miesiąc
  • Postów:487
0

Witam,
tworzę interaktywny diagram, którego jedną z opcji jest zmiana koloru węzła. Wszystkie węzły przechowuję w tablicy w formie obiektów. Następnie w komponencie węzła pobieram tę tablicę i odszukuję węzła o konkretnym id. Chciałbym w jakiś sposób przechować dane węzła, żeby nie korzystać ciągle z find na tablicy. Jednak kiedy użyję w taki sposób useEffect:

Kopiuj
useEffect(() => {
		if (!nodes) return;
		setCurrentNodeData(nodes?.find((el) => el.id === id));
	}, [nodes]); 

Wykonuje on się wielokrotnie podczas przeciągania węzła. Jest to spowodowane tym, że podczas przeciągania zmieniana jest jedna z wartości obiektu, która w tym komponencie nie jest istotna. Czy da się tego uniknąć i reagować tylko na zmiany konkretnej właściwości konkretnego obiektu?

Korzystam z React-Flow

Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:3 dni
  • Postów:847
0
Gouda105 napisał(a):

Czy da się tego uniknąć i reagować tylko na zmiany konkretnej właściwości konkretnego obiektu?

Tak

Jeśli mamy obiekt to możemy porównać pojedynczą właściwość

Kopiuj
const [value, setValue] = useState({
  name: "Xarviel",
  age: 24,
});

useEffect(() => {
  // ...
}, [value?.name])

Przy tablicach możemy porównać jej długość, sprawdzać konkretną pozycję po indexie, lub skorzystać z jakieś metody find, some itd

Kopiuj
const [nodes, setNodes] = useState([]);

useEffect(() => {
  // ...
}, [nodes?.length])

useEffect(() => {
  // ...
}, [nodes?.[3]?.name);

useEffect(() => {
  // 
}, [nodes?.find((el) => el.id === id)?.name]);
edytowany 4x, ostatnio: Xarviel

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.