ReactDərs 10 / 15

Siyahıları dəyişmək

Yeni vəziyyət yarat

React state-ni yerində dəyişmək əvəzinə yeni massiv və dəyişən obyekt üçün yeni obyekt yarat. Spread əlavə etmək, filter silmək, map konkret elementi yeniləmək üçündür. Əvvəlki state-dən asılı əməliyyatda funksional setter istifadə et.

import { useState } from 'react';
export default function Tasks() {
  const [tasks, setTasks] = useState([]);
  function add() {
    const task = { id: crypto.randomUUID(), title: 'Yeni tapşırıq', done: false };
    setTasks(previous => [...previous, task]);
  }
  function toggle(id) {
    setTasks(previous => previous.map(task =>
      task.id === id ? { ...task, done: !task.done } : task
    ));
  }
  return <section>
    <button type="button" onClick={add}>Əlavə et</button>
    <ul>{tasks.map(task => <li key={task.id}>
      <label><input type="checkbox" checked={task.done}
        onChange={() => toggle(task.id)} /> {task.title}</label>
      <button type="button" onClick={() =>
        setTasks(previous => previous.filter(item => item.id !== task.id))
      }>Sil: {task.title}</button>
    </li>)}</ul>
  </section>;
}

Nümunə

Səthi surətin sərhədi

[...tasks] yeni xarici massiv yaradır, içindəki obyektləri dərin köçürmür. Sonra copy[0].done = true etsən köhnə state-dəki obyekt də dəyişər. Dəyişən yolu yeni obyektlərlə qur. sort yerində dəyişdiyindən state-ni sıralamazdan əvvəl surət çıxar. Nəticəni ID ilə dəyiş ki, eyni mətnli tapşırıqlar səhvən birgə silinməsin.

Əlavə qeydlər və mənbələr

State-də saxlanan massivə element əlavə edərkən spread, silərkən filter, yeniləyərkən map ilə yeni massiv yarat. Dəyişən obyekt üçün də yeni obyekt qur; köhnə state-i yerində dəyişmə.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

Immutability və yeni massiv
Əlavə etmək və silmək
Obyektin map ilə yenilənməsi

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Elementi dəyişmədən sil

Silinəcək dəyəri seç; ilkin siyahını nəticə ilə müqayisə et.

SiyahıSilinəcək dəyər

Hədəf: React elementini nəticədən sil.

Canlı nəticə

Giriş"HTML""CSS""React"

Nəticə"HTML""CSS""React"

Mənbə kodu

setItems(old => old.filter(item => item !== "none"))

Özün sına

Unikal ID-li tapşırıq əlavə et, tamamlanmış et və sil. Funksional setter istifadə et; əvvəlki massivin və dəyişdirilən obyektin mutasiya edilmədiyini yoxla.

Nəticəni necə yoxlayım?

Əlavə, tamamlanmış işarələmə və silmə işləyir; əvvəlki massiv və dəyişdirilməyən obyektlər mutasiya olunmur.

Gözlənilən nəticə

Boş mətn əlavə edilmir; iki eyni mətn ayrı ID ilə saxlanır.
Tamamla və Sil yalnız seçilmiş tapşırığa təsir edir; əvvəlki state mutasiya edilmir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Əlavə etmə spread, tamamlama map və yeni obyekt, silmə isə filter ilə aparılır. ID hadisə zamanı yaradılır.

App.jsx

import { useState } from 'react';
export default function App() {
  const [text, setText] = useState('');
  const [tasks, setTasks] = useState([]);
  function add(event) {
    event.preventDefault(); if (!text.trim()) return;
    const task = { id: crypto.randomUUID(), title: text.trim(), done: false };
    setTasks(previous => [...previous, task]); setText('');
  }
  function toggle(id) { setTasks(previous => previous.map(task => task.id === id ? { ...task, done: !task.done } : task)); }
  function remove(id) { setTasks(previous => previous.filter(task => task.id !== id)); }
  return <><form onSubmit={add}><label>Tapşırıq<input value={text} onChange={event => setText(event.target.value)} /></label><button>Əlavə et</button></form>
    <ul>{tasks.map(task => <li key={task.id}><label><input type="checkbox" checked={task.done} onChange={() => toggle(task.id)} />{task.title}</label><button onClick={() => remove(task.id)}>Sil</button></li>)}</ul></>;
}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.