當我使用重繪時Firebase停止保存

我想在保存newRider到 Firebase 后重繪 我的頁面。但是當我使用window.location.reload();或與(false)它不保存。沒有它，它就可以作業。可以在一個檔案中包含這么長的代碼嗎？

import React from "react";
import { RidersDB } from "../../Backend/DataBase/RidersDB";

const ridersDB = new RidersDB();

export default function CrewMemberSetCreate() {
    const [newIsShown, setNewIsShown] = React.useState(false);
    const [newRider, setNewRider] = React.useState({
        firstName: "",
        lastName: "",
        age: 0,
        favTrick: "",
        dreamTrick: "",
        youtube: "",
        instagram: "",
        isShown: newIsShown,
        img: "",
    });

    function handleChange(event) {
        setNewRider((prevNewRider) => {
            return {
                ...prevNewRider,
                [event.target.name]: event.target.value,
            };
        });
    }

    const createRider = (event) => {
        event.preventDefault();
        ridersDB.createRider({
            firstName: newRider.firstName,
            lastName: newRider.lastName,
            age: Number(newRider.age),
            favTrick: newRider.favTrick,
            dreamTrick: newRider.dreamTrick,
            youtube: newRider.youtube,
            instagram: newRider.instagram,
            isShown: newIsShown,
            img: "",
        });
        //here i want reload and tried to usewindow.location.reload(false);

    };

    return (
        <div className="setCreate">
            <h2>Add Rider</h2>
            <div className="centerForm">
                <form>
                    <input
                        type="text"
                        placeholder="First Name"
                        onChange={handleChange}
                        value={newRider.firstName}
                        name="firstName"
                    />
                    <input
                        type="text"
                        placeholder="Last Name"
                        onChange={handleChange}
                        value={newRider.lastName}
                        name="lastName"
                    />
                    <input
                        type="number"
                        placeholder="Age (number)"
                        min="1"
                        onChange={handleChange}
                        value={newRider.age}
                        name="age"
                    />
                    <input
                        type="text"
                        placeholder="Favourite Trick"
                        onChange={handleChange}
                        value={newRider.favTrick}
                        name="favTrick"
                    />
                    <input
                        type="text"
                        placeholder="Dream Trick"
                        onChange={handleChange}
                        value={newRider.dreamTrick}
                        name="dreamTrick"
                    />
                    <input
                        type="text"
                        placeholder="Youtube Link"
                        onChange={handleChange}
                        value={newRider.youtube}
                        name="youtube"
                    />
                    <input
                        type="text"
                        placeholder="Instagram Link"
                        onChange={handleChange}
                        value={newRider.instagram}
                        name="instagram"
                    />
                    <div className="checkboxDiv">
                        <label>Show on home page?</label>
                        <input
                            type="checkbox"
                            onClick={() => {
                                setNewIsShown((prevState) => !prevState);
                            }}
                        />
                    </div>
                    <button onClick={createRider}>Add Rider</button>
                </form>
            </div>
        </div>
    );
}

RidersDB.js

import { db } from "./firebase-config";
import { addDoc, collection, getDocs } from "firebase/firestore";

export class RidersDB {
    constructor() {
        this.ridersCollRef = collection(db, "ridersCrew");


        this.createRider = async (riderData) => {
            await addDoc(this.ridersCollRef, riderData);
        };

        this.getRiders = async () => {
            const data = await getDocs(this.ridersCollRef);
            return data.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
        };
    }
}

uj5u.com熱心網友回復：

這些createRider()方法回傳一個Promise. 您應該等待它解決然后繼續。嘗試重構代碼，如下所示：

const createRider = (event) => {
  event.preventDefault();

  return ridersDB.createRider({
    firstName: newRider.firstName,
    // ....
  }).then(() => {
    // resolved, proceed now 
    window.location.reload(false)
  }).catch((e) => console.log(e));
};

標籤：Google Cloud Collective javascript 反应 火力基地 重新加载

上一篇：gprof僅顯示呼叫-帶有WSL1的Ubuntu中的C程式

下一篇：從系統架構分析安全問題及應對措施