Блог

Хорошо, вот загадка. У меня есть выбор ввода, и я использую Zustand для состояния. Я вижу непоследовательное состояние и не получаю того, что подозреваю.

Это выглядит так.

 const handleSortChange = async (event) => {
  // set a state variable
  setSort(event.value)

  // do a network call using sortBy and other things
  // the call is wrong when using sortBy and I'll replace
  // this bug with console.log statements below ...
}
 

Для выбора есть два значения: «один» и «два».

Если я утешу.выйдите из системы, я вижу проблему и ошибку. Я не могу использовать переменную состояния внутри этой функции. Он не ждет, не решает и не ведет себя так, как я думаю.

Так что для моего выбора, если я переключусь между одним и двумя, я получу это забавное поведение:

 const handleSortChange = async (event) => {
  // set a state variable
  setSort(event.value)  // this sets sortBy
  console.log(event.value)
  console.log(sortBy)   // this is the zustand state variable that is in scope
  // I expect these would be the same, but they aren't!  :O
}
 

Консоль.вывод журнала выглядит так при переключении с «одного» на «два» на выбранном входе.

 two  // event.value
one  // the in-scope zustand variable sortBy as a read after the set
 

При переключении на «два» при выборе я получаю противоположное, но эти переменные не совпадают?

 one  // event.value
two  // the set variable sortBy
 

При переключении на «один» на выбор. Потому что что-то не согласуется или не решается так, как я думаю.

Я думал, что переменная состояния zustand будет согласованной (особенно когда я добавляю await, и eslint говорит мне, что await действительно влияет на эту функцию). Сейчас для меня это не проблема, потому что я могу использовать этот параметр для всего, что мне нужно. Но я просто чувствую, что мне здесь чего-то не хватает, и я надеюсь, что Зустанд не поймает меня, когда мне нужно будет полагаться на изменение состояния или постоянное хранение где-то.

Похоже, это та же проблема и то же поведение, что и у React setState . С setState in React вы бы этого не сделали, даже если это обычная ловушка. Значение не обновляется немедленно, такой способ мышления не работает для параллельного графического интерфейса.

https://twitter.com/acemarke/status/1389376376508227592

В случае Zustand у него может даже не быть функции обратного вызова для запуска после set вызова. Другими словами, в данный момент это не сработает.