Может ли обновление React usestate быть вложено в другое функциональное обновление useState?

Есть n элементов, по которым пользователь может голосовать. Есть два состояния React:

  • votes — массив голосов пользователя по каждому элементу.

const [votes, setVotes] = useState({});

  • voteChanges показывает, сколько раз пользователь изменил свой голос по любому из пунктов.

const [voteChanges, setVoteChanges] = useState(0);

У нас есть слушатель базы данных, определенный в useEffect. Когда голоса добавляются/изменяются в базе данных, вызывается слушатель. Нам нужно состояние votes для сравнения каждого нового голоса с его предыдущим значением в голосах, чтобы решить, устанавливать ли voteChanges в true. Однако мы не можем определить votes как зависимость в useEffect, иначе мы окажемся в бесконечном цикле. Чтобы получить доступ к текущему значению votes, мы используем его функциональное обновление. Можно ли вызывать setVoteChanges внутри функционального обновления setVotes? Если нет, то почему и как решить эту проблему?

useEffect(() => {
    databaseListener((changes) => {
      setVotes((oldVotes) => {
        const oVotes = { ...oldVotes };
        for (let change of changes) {
          const itemId = change.id;
          const newVote = change.vote;
          if (oVotes[itemId] !== newVote) {
            setVoteChanges(oldCount => oldCount + 1);
          }
          oVotes[itemId] = newVote;
        }
        return oVotes;
      });
    });
  });
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий