如何基于Firestore数据库状态初始化按钮并实现状态切换？

核心问题分析 #

1. 按钮文本判断逻辑错误：你用{toggleStatus ? "Returned" : "Taken"}来判断按钮文本，但toggleStatus是函数引用，永远为真，导致按钮一直显示"Returned"，完全没用到Firestore里的toy.availability状态。
2. 状态切换逻辑错误：toggleStatus函数里直接把availability设为true，没有根据当前状态取反，点击后无法实现切换效果。
3. 不必要的页面刷新：用window.location.reload刷新页面体验差，其实可以通过更新本地状态或监听Firestore实时变化同步数据。
4. 冗余状态变量：newAvailability状态从未使用，属于无效代码。

修复后的完整代码 #

function App() {
    const [toys, setToys] = useState([]); 
    const toysCollectionRef = collection(db,"toys"); 

    // 修正状态切换逻辑：取反当前availability
    const toggleStatus = async (toyID, currentAvailability) => {
        const userDoc = doc(db,"toys",toyID);
        // 取反当前状态，实现切换
        const newFields = {availability: !currentAvailability};
        await updateDoc(userDoc, newFields);
        // 不用刷新页面，直接更新本地state同步数据
        setToys(prevToys => prevToys.map(toy => 
            toy.id === toyID ? {...toy, availability: !currentAvailability} : toy
        ));
      };

      useEffect(() => {  
        const getToys = async () => {  
          const data = await getDocs(toysCollectionRef); 
          setToys(data.docs.map((doc) => ({...doc.data(), id:doc.id }))) 
        };

        getToys();

        // 可选：添加Firestore实时监听，自动同步数据库变化
        // const unsubscribe = onSnapshot(toysCollectionRef, (snapshot) => {
        //   setToys(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
        // });
        // return unsubscribe;
      }, []);
    
      return (
          <div className="App">
                <table>
                   <tr><td>Availability</td><td>Status Action</td></tr>
                        {toys.map((toy) => (
                            <tr key={toy.id}>
                                <td>{Boolean(toy.availability).toString()}</td>
                                <td>
                                    {/* 根据toy.availability显示对应文本 */}
                                    <button onClick={() => toggleStatus(toy.id, toy.availability)}>
                                        {toy.availability ? "Taken" : "Returned"}
                                    </button>
                                </td>
                            </tr>
                        ))}
                </table>
            </div>
        );         
}

export default App;

关键修复说明 #

• 按钮文本修正：将判断条件改为toy.availability ? "Taken" : "Returned"，直接读取Firestore返回的物品状态显示对应文本。
• 切换逻辑修正：在toggleStatus中用!currentAvailability取反当前状态，实现点击切换true/false。
• 移除页面刷新：更新Firestore后直接修改本地toys状态，让UI实时更新，无需刷新页面。
• 可选优化：如果需要实时同步其他设备的修改，可以启用注释里的onSnapshot监听，数据库变化时自动更新UI。

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