Snippet

Zerstörungsfreies Umordnen von Listen mit modernem Array toSpliced im State

React erfordert, dass Zustandsaktualisierungen unveränderlich sind. Modernes ECMAScript führt Array.prototype.toSpliced() ein, welches eine neue flache Kopie des Arrays mit hinzugefügten oder entfernten Elementen zurückgibt, anstatt das Original-Array wie Array.prototype.splice() direkt zu mutieren.

snippet.js

javascript

import { useState } from 'react';
 
export function PriorityTaskList() {
  const [tasks, setTasks] = useState(['Review PR', 'Fix CI', 'Write Tests', 'Deploy']);
 
  const moveTask = (fromIndex, toIndex) => {
    if (toIndex < 0 || toIndex >= tasks.length) return;
    const targetItem = tasks[fromIndex];
    const listWithoutItem = tasks.toSpliced(fromIndex, 1);
    const reorderedList = listWithoutItem.toSpliced(toIndex, 0, targetItem);
    setTasks(reorderedList);
  };
 
  return (
    <ul>
      {tasks.map((task, idx) => (
        <li key={task}>
          {task}
          <button onClick={() => moveTask(idx, idx - 1)}>Up</button>
          <button onClick={() => moveTask(idx, idx + 1)}>Down</button>
        </li>
      ))}
    </ul>
  );
}

react

Erklärung

const listWithoutItem = tasks.toSpliced(fromIndex, 1);

Erstellt eine neue Array-Kopie ohne das Element am Startindex, ohne tasks direkt zu mutieren.

const reorderedList = listWithoutItem.toSpliced(toIndex, 0, targetItem);

Erstellt ein weiteres neues Array mit dem Ziel-Element an der neuen Zielposition.

setTasks(reorderedList);

Aktualisiert den React-Zustand mit der neu erstellten, unveränderlichen Array-Referenz.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Zerstörungsfreies Umordnen von Listen mit modernem Array toSpliced im State

Verwandt