Есть 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;
});
});
});