Snippet

Nicht-mutierende Array-Zustandsaktualisierungen mit toSpliced

Modernes JavaScript bietet nicht-mutierende Array-Methoden wie Array.prototype.toSpliced(). Im Gegensatz zur mutierenden splice()-Methode erstellt toSpliced() eine flache Kopie mit den Änderungen, wodurch React eine neue Array-Referenz für die Zustandserkennung erhält.

snippet.js

javascript

import React, { useState } from 'react';
 
export function TaskList() {
  const [tasks, setTasks] = useState(['Plan', 'Code', 'Test']);
 
  const removeTaskAtIndex = (targetIndex) => {
    // toSpliced returns a brand new array without mutating the existing state
    const updatedTasks = tasks.toSpliced(targetIndex, 1);
    setTasks(updatedTasks);
  };
 
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={task}>
          {task}
          <button onClick={() => removeTaskAtIndex(index)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

react

Erklärung

const [tasks, setTasks] = useState(['Plan', 'Code', 'Test']);

Initialisiert den Komponentenzustand mit einem Array von Strings.

const updatedTasks = tasks.toSpliced(targetIndex, 1);

Erzeugt ein neues Array, aus dem das Element an targetIndex entfernt wurde, ohne das Original-Array zu mutieren.

setTasks(updatedTasks);

Setzt das neue Array als Zustand, um ein sicheres Re-Rendering auszulösen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Nicht-mutierende Array-Zustandsaktualisierungen mit toSpliced

Verwandt