Question

我一直在用React开发一个Web应用程序。这是一段简短的视频，我在其中测试复选框的真假值。创建新任务并从UI更新复选框值后，它不会更新。它还与其他现有任务随机发生。我确定没有任何代码错误，因为任务有时会更新吗？

以下是短片：https://drive.google.com/file/d/1yd1wTCrjdudvsuLRvtlaa4BINblluO1r/view?usp=sharing

library(tidyverse)
data.frame(x = rnorm(100), y = rnorm(100)) %>%
  ggplot(aes(x = x, y = y)) +
  geom_point() +
  scale_y_continuous(
    breaks = c(-2, -1, 0, .5, 1, 2),
    labels = c("-2", "-1", "0", "0.5", "1", "2")
  )

Answer 1

如果我正确理解了代码，则可以先单击Checkbox状态，然后翻转Checkbox状态（this.state.checked），然后翻转Firebase状态。但是翻转firebase状态是基于内部Checkbox状态的，该状态可能已经更改。两者都是异步操作，但是当然翻转Firebase状态或运行doneState()方法比翻转内部状态要花更多的时间。

所以我认为这就是这里发生的事情：

选中复选框
内部状态（!this.state.checked）从false变为true
Firebase身份验证
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 */
      });

    }}
/>
);

Firebase有时不更新值

1 个答案: