Firebase иногда не обновляет значения

Question

Я занимаюсь разработкой веб-приложения с помощью React.Вот короткое видео, где я проверяю значение true и false флажка.Как только я создаю новое задание и обновляю значение флажка из пользовательского интерфейса, оно не обновляется.Это также происходит случайным образом с другой существующей задачей.Я уверен, что нет ошибки кода, потому что задача иногда обновляется?

Вот короткое видео: https://drive.google.com/file/d/1yd1wTCrjdudvsuLRvtlaa4BINblluO1r/view?usp=sharing

//State
state = {
    checked: false,
}

//Done state function
async doneState(uid) {
    const { currentUser } = await firebase.auth();
    if (currentUser) {
      firebase
        .database()
        .ref(`/Users/${currentUser.uid}/Tasks/${uid}/done`)
        .set(!this.state.checked);
    }
  }

// UI Render
render(){
  return(
  <Checkbox
    style={{ alignSelf: "center" }}
    defaultChecked={item.done}
    onChange={() => {
      this.setState({
      checked: !this.state.checked /* disabled: true */
      });
      this.doneState(item.uid);
    }}
/>
);
}

Answer 1

Если я правильно понимаю код, вы переключаете состояние флажка (this.state.checked) и затем переключаете состояние firebase после нажатия на флажок.Но переключение состояния firebase происходит на основе внутреннего состояния Checkbox, которое, возможно, уже изменилось.Оба являются асинхронными операциями, но, конечно, переключение состояния firebase или запуск метода doneState() требует больше времени, чем простое переключение внутреннего состояния.

Так что я думаю, что это происходит здесь:

1. Флажок
2. Внутреннее состояние (!this.state.checked) изменяется с false на true
3. Аутентификация Firebase
4. Firebase устанавливает значение от falseна !this.state.checked === false

Так что в Firebase ничего не меняется.Попробуйте установить текущее состояние при установке флажка на doneState().

Я думаю, это должно работать:

//Done state function with current state property
async doneState(uid, state) {
    const { currentUser } = await firebase.auth();
    if (currentUser) {
      firebase
        .database()
        .ref(`/Users/${currentUser.uid}/Tasks/${uid}/done`)
        .set(!state);
    }
  }

// UI Render
render(){
  return(
  <Checkbox
    style={{ alignSelf: "center" }}
    defaultChecked={item.done}
    onChange={() => {
      // To be safe here I also changed the order of these commands
      this.doneState(item.uid, this.state.checked);
      this.setState({
      checked: !this.state.checked /* disabled: true */
      });

    }}
/>
);