useEffect - Zapobiega nieskończonej pętli podczas aktualizacji stanu

Chciałbym, aby użytkownik mógł posortować listę rzeczy do zrobienia. Gdy użytkownicy wybiorą element z listy rozwijanej, ustawi, sortKeyktóra utworzy nową wersję setSortedTodos, a następnie uruchomi useEffecti zadzwonisetSortedTodos .

Poniższy przykład działa dokładnie tak, jak chcę, jednak eslint zachęca mnie do dodania todosdo useEffecttablicy zależności, a jeśli to zrobię, spowoduje nieskończoną pętlę (jak można się spodziewać).

const [todos, setTodos] = useState([]);
const [sortKey, setSortKey] = useState('title');

const setSortedTodos = useCallback((data) => {
  const cloned = data.slice(0);

  const sorted = cloned.sort((a, b) => {
    const v1 = a[sortKey].toLowerCase();
    const v2 = b[sortKey].toLowerCase();

    if (v1 < v2) {
      return -1;
    }

    if (v1 > v2) {
      return 1;
    }

    return 0;
  });

  setTodos(sorted);
}, [sortKey]);

useEffect(() => {
    setSortedTodos(todos);
}, [setSortedTodos]);

Przykład na żywo:

Pokaż fragment kodu

const {useState, useCallback, useEffect} = React;

const exampleToDos = [
    {title: "This", priority: "1 - high", text: "Do this"},
    {title: "That", priority: "1 - high", text: "Do that"},
    {title: "The Other", priority: "2 - medium", text: "Do the other"},
];

function Example() {
    const [todos, setTodos] = useState(exampleToDos);
    const [sortKey, setSortKey] = useState('title');

    const setSortedTodos = useCallback((data) => {
      const cloned = data.slice(0);

      const sorted = cloned.sort((a, b) => {
        const v1 = a[sortKey].toLowerCase();
        const v2 = b[sortKey].toLowerCase();

        if (v1 < v2) {
          return -1;
        }

        if (v1 > v2) {
          return 1;
        }

        return 0;
      });

      setTodos(sorted);
    }, [sortKey]);

    useEffect(() => {
        setSortedTodos(todos);
    }, [setSortedTodos]);

    const sortByChange = useCallback(e => {
        setSortKey(e.target.value);
    });
    
    return (
        <div>
            Sort by:&nbsp;
            <select onChange={sortByChange}>
                <option selected={sortKey === "title"} value="title">Title</option>
                <option selected={sortKey === "priority"} value="priority">Priority</option>
            </select>
            {todos.map(({text, title, priority}) => (
                <div className="todo">
                    <h4>{title} <span className="priority">{priority}</span></h4>
                    <div>{text}</div>
                </div>
            ))}
        </div>
    );
}

ReactDOM.render(<Example />, document.getElementById("root"));

body {
    font-family: sans-serif;
}
.todo {
    border: 1px solid #eee;
    padding: 2px;
    margin: 4px;
}
.todo h4 {
    margin: 2px;
}
.priority {
    float: right;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

Rozwiń fragment kodu

Myślę, że musi istnieć lepszy sposób na zrobienie tego, co zapewni zadowolenie eslintowi.

— DanV
źródło

Uwaga dodatkowa: sortwywołanie zwrotne może być po prostu: return a[sortKey].toLowerCase().localeCompare(b[sortKey].toLowerCase());co ma tę zaletę, że porównuje ustawienia narodowe, jeśli środowisko ma rozsądne informacje o ustawieniach regionalnych. Jeśli chcesz, możesz też rzucić w to destrukcją: pastebin.com/7X4M1XTH

— TJ Crowder

Jaki błąd jest eslintgenerowany?

— Luze,

Czy możesz zaktualizować pytanie, aby uzyskać działający minimalny odtwarzalny przykład problemu przy użyciu fragmentów stosu ( [<>]przycisk paska narzędzi)? Fragmenty stosu obsługują React, w tym JSX; oto jak to zrobić . W ten sposób ludzie mogą sprawdzić, czy ich proponowane rozwiązania nie mają problemu z nieskończoną pętlą ...

— TJ Crowder

To naprawdę ciekawe podejście i naprawdę interesujący problem. Jak mówisz, możesz zrozumieć, dlaczego ESLint uważa, że musisz dodać todosdo tablicy zależności useEffect, i możesz zobaczyć, dlaczego nie powinieneś. :-)

— TJ Crowder

Dodałem dla ciebie przykład na żywo. Naprawdę chcę zobaczyć odpowiedź.

— TJ Crowder

Odpowiedzi:

Twierdzę, że oznacza to, że takie podejście nie jest idealne. Funkcja jest rzeczywiście zależna od todos. GdybysetTodos zostanie wywołany w innym miejscu, funkcja wywołania zwrotnego musi zostać ponownie obliczona, w przeciwnym razie działa na nieaktualnych danych.

Dlaczego mimo wszystko przechowujesz posortowaną tablicę w stanie? Możesz użyć useMemodo sortowania wartości, gdy zmienia się klucz lub tablica:

const sortedTodos = useMemo(() => {
  return Array.from(todos).sort((a, b) => {
    const v1 = a[sortKey].toLowerCase();
    const v2 = b[sortKey].toLowerCase();

    if (v1 < v2) {
      return -1;
    }

    if (v1 > v2) {
      return 1;
    }

    return 0;
  });
}, [sortKey, todos]);

Następnie odniesienie sortedTodos wszędzie.

Przykład na żywo:

Pokaż fragment kodu

const {useState, useCallback, useMemo} = React;

const exampleToDos = [
    {title: "This", priority: "1 - high", text: "Do this"},
    {title: "That", priority: "1 - high", text: "Do that"},
    {title: "The Other", priority: "2 - medium", text: "Do the other"},
];

function Example() {
    const [sortKey, setSortKey] = useState('title');
    const [todos, setTodos] = useState(exampleToDos);

    const sortedTodos = useMemo(() => {
      return Array.from(todos).sort((a, b) => {
        const v1 = a[sortKey].toLowerCase();
        const v2 = b[sortKey].toLowerCase();

        if (v1 < v2) {
          return -1;
        }

        if (v1 > v2) {
          return 1;
        }

        return 0;
      });
    }, [sortKey, todos]);

    const sortByChange = useCallback(e => {
        setSortKey(e.target.value);
    }, []);
    
    return (
        <div>
            Sort by:&nbsp;
            <select onChange={sortByChange}>
                <option selected={sortKey === "title"} value="title">Title</option>
                <option selected={sortKey === "priority"} value="priority">Priority</option>
            </select>
            {sortedTodos.map(({text, title, priority}) => (
                <div className="todo">
                    <h4>{title} <span className="priority">{priority}</span></h4>
                    <div>{text}</div>
                </div>
            ))}
        </div>
    );
}

ReactDOM.render(<Example />, document.getElementById("root"));

body {
    font-family: sans-serif;
}
.todo {
    border: 1px solid #eee;
    padding: 2px;
    margin: 4px;
}
.todo h4 {
    margin: 2px;
}
.priority {
    float: right;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

Rozwiń fragment kodu

Nie ma potrzeby przechowywania posortowanych wartości w stanie, ponieważ zawsze można wyprowadzić / obliczyć posortowaną tablicę z tablicy „podstawowej” i klucza sortowania. Twierdzę, że ułatwia to również zrozumienie kodu, ponieważ jest mniej skomplikowany.

— Felix Kling
źródło

Och, niezłe użycie useMemo. Tylko pytanie poboczne, dlaczego nie użyć .localComparetego rodzaju?

— Tikkes,

To byłoby rzeczywiście lepsze. Właśnie skopiowałem kod OP i nie zwróciłem na to uwagi (niezbyt istotne dla problemu).

— Felix Kling

Naprawdę proste, łatwe do zrozumienia rozwiązanie.

— TJ Crowder,

Ach tak, użyjMemo! Zapomniałem o tym :)

— DanV

Powodem nieskończonej pętli jest to, że todos nie pasują do poprzedniego odwołania i efekt zostanie uruchomiony ponownie.

Po co w ogóle korzystać z efektu kliknięcia? Możesz uruchomić go w takiej funkcji:

const [todos, setTodos] = useState([]);

function sortTodos(e) {
    const sortKey = e.target.value;
    const clonedTodos = [...todos];
    const sorted = clonedTodos.sort((a, b) => {
        return a[sortKey.toLowerCase()].localeCompare(b[sortKey.toLowerCase()]);
    });

    setTodos(sorted);
}

a po rozwijaniu wykonaj onChange.

    <select onChange="sortTodos"> ......

Przy okazji, zwróć uwagę na zależność, ESLint ma rację! Twoje zadania do wykonania, w przypadku opisanym powyżej, są zależne i powinny znajdować się na liście. Podejście do wyboru przedmiotu jest niewłaściwe, a zatem twój problem.

— Tikkes
źródło

„sort zwróci nową instancję tablicy”, a nie wbudowana metoda sortowania. Sortuje tablicę w miejscu. data.slice(0)tworzy kopię.

— Felix Kling

Nie jest to prawdą, kiedy to zrobisz, setStateponieważ nie będzie edytować istniejącego obiektu, a zatem sklonuje go wewnętrznie. Nieprawidłowe sformułowanie w mojej odpowiedzi, prawda. Zmienię to.

— Tikkes,

setStatenie klonuje danych. Dlaczego myślisz, że?

— Felix Kling

@Tikkes - Nie, setStateniczego nie klonuje . Felix i OP mają rację, musisz skopiować tablicę przed posortowaniem.

— TJ Crowder

Okej, przepraszam. Wydaje mi się, że potrzebuję trochę więcej informacji na temat elementów wewnętrznych. Rzeczywiście musisz skopiować i nie zmieniać istniejącego state.

— Tikkes,

Musisz tutaj użyć funkcjonalnej formy setState:

  const [todos, setTodos] = useState(exampleToDos);
    const [sortKey, setSortKey] = useState('title');

    const setSortedTodos = useCallback((data) => {

      setTodos(currTodos => {
        return currTodos.sort((a, b) => {
          const v1 = a[sortKey].toLowerCase();
          const v2 = b[sortKey].toLowerCase();

          if (v1 < v2) {
            return -1;
          }

          if (v1 > v2) {
            return 1;
          }

          return 0;
        });
      })

    }, [sortKey]);

    useEffect(() => {
        setSortedTodos(todos);
    }, [setSortedTodos, todos]);

Działające kody i skrzynka

Nawet jeśli kopiujesz stan, aby nie mutować oryginalnego, nadal nie ma gwarancji, że uzyskasz jego najnowszą wartość, ponieważ ustawienie stanu jest asynchroniczne. Ponadto większość metod zwróci płytką kopię, więc i tak może dojść do mutacji stanu oryginalnego.

Korzystanie z funkcji setStatezapewnia, że otrzymujesz najnowszą wartość stanu i nie mutujesz oryginalnej wartości stanu.

— Przejrzystość
źródło

„i nie mutuj oryginalnej wartości stanu”. Nie sądzę, aby React przekazał kopię do wywołania zwrotnego. .sortzmienia tablicę w miejscu, więc nadal musisz ją skopiować samodzielnie.

— Felix Kling

Hmm, dobra uwaga, właściwie nie mogę znaleźć żadnego potwierdzenia, że przekazuje kopię stanu, choć pamiętam, że czytałem coś takiego wcześniej.

— Clarity

Znalazłem to tutaj: reagjs.org/docs/… . „Możemy użyć funkcjonalnej formy aktualizacji setState. Pozwala nam określić, w jaki sposób stan powinien się zmienić bez odwoływania się do bieżącego stanu ”

— Clarity,

Nie czytam tego jako otrzymania kopii. Oznacza to po prostu, że nie musisz podawać bieżącego stanu jako zależności „zewnętrznej”.

— Felix Kling