useEffect - предотвратить бесконечный цикл при обновлении состояния.

Я бы хотел, чтобы пользователь мог сортировать список элементов задач. Когда пользователь выбирает элемент из выпадающего списка, он устанавливает, sortKeyкоторый создаст новую версию setSortedTodos, и, в свою очередь, вызывает useEffectвызов и setSortedTodos.

Приведенный ниже пример работает именно так, как я хочу, однако eslint побуждает меня добавить todosк useEffectмассиву зависимостей, и если я это сделаю, это вызовет бесконечный цикл (как и следовало ожидать).

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]);

Живой пример:

Показать фрагмент кода

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>

Развернуть фрагмент

Я думаю, что должен быть лучший способ сделать это, чтобы Эслинт был счастлив.

javascript reactjs react-hooks eslint DanV
источник

Просто примечание: sortобратный вызов может быть простым: return a[sortKey].toLowerCase().localeCompare(b[sortKey].toLowerCase());что также имеет преимущество в сравнении локали, если среда имеет разумную информацию о локали. Если хотите, вы также можете применить к нему деструктуризацию: pastebin.com/7X4M1XTH

TJ Crowder

Какую ошибку eslintвыкидывает?

Luze

Не могли бы вы обновить вопрос, чтобы предоставить работоспособный минимальный воспроизводимый пример проблемы с использованием фрагментов стека ( [<>]кнопка панели инструментов)? Фрагменты стека поддерживают React, включая JSX; вот как это сделать . Таким образом, люди могут проверить, что в их предложенных решениях нет проблемы бесконечного цикла ...

TJ Crowder

Это действительно интересный подход и действительно интересная проблема. Как вы говорите, вы можете понять, почему ESLint считает, что вам нужно добавить todosмассив зависимостей useEffect, и вы можете понять, почему этого не следует делать . :-)

TJ Crowder

Я добавил живой пример для вас. Очень хочу увидеть это ответ.

TJ Crowder

Ответы:

Я бы сказал, что это означает, что идти по этому пути не идеально. Функция действительно зависит от todos. Если setTodosвызывается где-то еще, функция обратного вызова должна быть пересчитана, иначе она работает с устаревшими данными.

Почему вы храните отсортированный массив в любом случае? Вы можете использовать useMemoдля сортировки значений при изменении ключа или массива:

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]);

Тогда ссылка sortedTodosвезде.

Живой пример:

Показать фрагмент кода

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>

Развернуть фрагмент

Нет необходимости хранить отсортированные значения в состоянии, так как вы всегда можете получить / вычислить отсортированный массив из «базового» массива и ключа сортировки. Я бы сказал, что это также облегчает понимание вашего кода, поскольку он менее сложен.

Феликс Клинг
источник

О, приятное использование useMemo. Просто побочный вопрос, почему бы не использовать .localCompareв сортировке?

Tikkes

Это было бы действительно лучше. Я просто скопировал код ОП и не обратил на это внимания (не имеет отношения к проблеме).

Феликс Клинг

Действительно простое, понятное решение.

TJ Crowder

Ах да, используйте Memo! Забыл об этом :)

DanV

Причина бесконечного цикла в том, что задачи не соответствуют предыдущей ссылке, и эффект будет запущен повторно.

Зачем использовать эффект для клик-действия в любом случае? Вы можете запустить его в такой функции:

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);
}

и в выпадающем списке сделайте onChange.

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

Обратите внимание на зависимость, кстати, ESLint прав! Ваши Todos, в случае, описанном выше, являются зависимостью и должны быть в списке. Подход к выбору предмета неправильный, а значит и ваша проблема.

Tikkes
источник

"sort вернет новый экземпляр массива" Не встроенный метод сортировки. Сортирует массив на месте. data.slice(0)создает копию.

Феликс Клинг

Это неверно, когда вы делаете a, setStateпоскольку он не будет редактировать существующий объект и, следовательно, будет внутренне его клонировать. Неправильная формулировка в моем ответе, правда. Я отредактирую это.

Tikkes

setStateне клонирует данные. Почему вы так думаете?

Феликс Клинг

@ Tikkes - Нет, setStateничего не клонирует. Феликс и ОП верны, вам нужно скопировать массив перед сортировкой.

TJ Crowder

Хорошо да извините Кажется, мне нужно больше читать о внутренностях. Вы действительно должны копировать, а не изменять существующие state.

Tikkes

Что вам нужно сделать здесь, это использовать функциональную форму 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]);

Рабочие коды и коробка

Даже если вы копируете состояние, чтобы не изменять исходное, все равно не гарантируется, что вы получите его последнее значение из-за асинхронного состояния установки. Кроме того, большинство методов вернут мелкую копию, так что вы можете в любом случае поменять исходное состояние.

Использование функционала setStateгарантирует, что вы получите последнее значение состояния и не измените первоначальное значение состояния.

ясность
источник

"и не изменяйте исходное значение состояния." Я не думаю, что React передает копию в обратный вызов. .sortизменяет массив на месте, так что вам все равно придется копировать его самостоятельно.

Феликс Клинг

Хм, хорошая мысль, я на самом деле не могу найти подтверждения, что он передает копию состояния, хотя я помню, что читал что-то подобное ранее.

Ясность

Нашел это здесь: Reactionjs.org/docs/… . «мы можем использовать функциональную форму обновления setState. Это позволяет нам указать, как нужно менять состояние, не ссылаясь на текущее состояние »

Clarity

Я не читаю это как получение копии. Это просто означает, что вам не нужно указывать текущее состояние как «внешнюю» зависимость.

Феликс Клинг