React+Firebase待办清单完成按钮状态仅能切换一次问题求助

你的问题出在**initialValues.isCompleted是固定的初始值**，不会随着数据库的更新同步变化。第一次点击时，它基于初始的false取反成true，但之后每次点击依然是基于这个初始的false取反，结果永远是true，自然无法切换回false。

方案1：先获取文档最新状态再更新 #

每次点击时，先从数据库拉取该待办项的最新isCompleted值，再取反更新，确保每次操作都基于当前最新状态：

const completedHandler = async (id) => {
  const docRef = doc(db, "todos", id);
  // 获取当前文档的最新数据
  const docSnap = await getDoc(docRef);
  
  if (docSnap.exists()) {
    const currentStatus = docSnap.data().isCompleted;
    // 取反并更新数据库
    await updateDoc(docRef, {
      isCompleted: !currentStatus
    });
  }
};

方案2：使用Firebase事务（推荐多用户场景） #

如果你的应用存在多用户协作的可能，用事务更安全——它能确保在更新过程中，文档没有被其他操作修改，避免并发冲突：

const completedHandler = (id) => {
  const docRef = doc(db, "todos", id);
  
  runTransaction(db, async (transaction) => {
    const docSnap = await transaction.get(docRef);
    if (!docSnap.exists()) {
      throw new Error("待办项不存在");
    }
    
    const currentStatus = docSnap.data().isCompleted;
    transaction.update(docRef, { isCompleted: !currentStatus });
  })
  .then(() => {
    console.log("状态切换成功");
  })
  .catch((err) => {
    console.error("状态切换失败：", err.message);
  });
};

额外提示：同步前端状态 #

如果前端用了状态管理（比如React的useState），更新数据库后记得同步更新前端列表，让UI实时反映最新状态：

// 假设你有前端待办列表状态
const [todos, setTodos] = useState([]);

const completedHandler = async (id) => {
  const docRef = doc(db, "todos", id);
  const docSnap = await getDoc(docRef);
  
  if (docSnap.exists()) {
    const currentStatus = docSnap.data().isCompleted;
    const newStatus = !currentStatus;
    
    // 更新数据库
    await updateDoc(docRef, { isCompleted: newStatus });
    // 更新前端列表
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, isCompleted: newStatus } : todo
    ));
  }
};

内容的提问来源于stack exchange，提问作者IKarr