在 MERN 中獲取請求失敗，狀態碼為 404

Question

我有一個 mern 項目，我想在其中使用 Reactjs 頁面更新用戶詳細信息。 我已成功從數據庫中獲取數據，單擊“編輯”按鈕后，我想更新數據。

我的問題-->點擊更新按鈕后，它進入主頁但數據沒有更新，並且在我的瀏覽器控制台中出現這樣的錯誤

Error: Request failed with status code 404
    createError createError.js:16
    settle settle.js:17
    onloadend xhr.js:66
    dispatchXhrRequest xhr.js:80
    xhrAdapter xhr.js:15
    dispatchRequest dispatchRequest.js:58
    request Axios.js:108
    method Axios.js:140
    wrap bind.js:9
    onSubmit AdminUdateForm.js:51
    React 14
    unstable_runWithPriority scheduler.development.js:468
    React 15
    js index.js:8
    js main.chunk.js:14300

我已經多次檢查了所有的 URL。 我從過去 1 周開始嘗試此操作，但直到現在每次都出現相同的錯誤。 請告訴如何擺脫這個。 請檢查我的代碼...

我認為錯誤與 reactjs 頁面有關

我已經嘗試了之前提出的所有問題，但沒有一個對我有幫助

認證.js

app.use('/edit', router);

router.route('/edituser/:id').get(function (req, res) {
    let id = req.params.id;
    console.log(id);
    User.findById(id, function (err, student) {
        res.json(student);
    });
});

router.route('/updateuser/:id').post(function (req, res) {
    User.findById(req.params.id, function (err, userdata) {
        if (!userdata)
            return next(new Error('Unable To Find Employee With This Id'));
        else {
            userdata.names = req.body.names;
            userdata.phone = req.body.phone;
          

            userdata.save().then(emp => {
                res.json('Employee Updated Successfully');
            })
                .catch(err => {
                    res.status(400).send("Unable To Update Employee");
                });
        }
    });
});

前端頁面

class Admin extends Component {
    constructor(props) {
        super(props);
        this.onChangenames = this.onChangenames.bind(this);
        this.onChangephone = this.onChangephone.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            names: "",
            phone: "",
        };
    }

 
    onChangenames(e) {
        this.setState({
            names: e.target.value,
        });
    }

    onChangephone(e) {
        this.setState({
            phone: e.target.value,
        });
    }

    onSubmit(e) {
        e.preventDefault();
        const obj = {
            names: this.state.names,
            phone: this.state.phone,
        };
        console.log(obj);
        axios.post('/updateuser/' + this.props.match.params.id, obj)
            .then((res) => console.log(res.data)).catch((err) => {
                console.log(err);
            });

        this.props.history.push("/");
    }

    render() {
        return (
            <>
                <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
                    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">
                        Company name
                    </a>
                    <button
                        class="navbar-toggler position-absolute d-md-none collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#sidebarMenu"
                        aria-controls="sidebarMenu"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <input
                        class="form-control form-control-dark w-100"
                        type="text"
                        placeholder="Search"
                        aria-label="Search"
                    />
                    <div class="navbar-nav">
                        <div class="nav-item text-nowrap">
                            <a class="nav-link px-3" href="#">
                                Sign out
                            </a>
                        </div>
                    </div>
                </header>

                <div class="container-fluid">
                    <div class="row">
                        <nav
                            id="sidebarMenu"
                            class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
                        >
                            <div class="position-sticky pt-3">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link active" aria-current="page" href="#">
                                            <span data-feather="home"></span>
                                            Dashboard
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="file"></span>
                                            Orders
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="shopping-cart"></span>
                                            Products
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="users"></span>
                                            Customers
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="bar-chart-2"></span>
                                            Reports
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="layers"></span>
                                            Integrations
                                        </a>
                                    </li>
                                </ul>

                                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                                    <span>Saved reports</span>
                                    <a
                                        class="link-secondary"
                                        href="#"
                                        aria-label="Add a new report"
                                    >
                                        <span data-feather="plus-circle"></span>
                                    </a>
                                </h6>
                                <ul class="nav flex-column mb-2">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="file-text"></span>
                                            Current month
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="file-text"></span>
                                            Last quarter
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="file-text"></span>
                                            Social engagement
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">
                                            <span data-feather="file-text"></span>
                                            Year-end sale
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </nav>

                        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                            <div class="alert alert-dark mt-5" role="alert">
                                Update user profile!!!
                            </div>

                            {/* --------------------------------------- */}

                            <div class="container">
                                <div class="row">
                                    <div class="col-sm-6 col-md-6 col-sm-6 p-4">
                                        <form onSubmit={this.onSubmit} method="post">
                                            <div class="row mb-4">
                                                <div class="form-outline mb-4">
                                                    <label class="form-label" for="form3Example3">
                                                        Identity
                                                    </label>
                                                    <input
                                                        type="text"
                                                        id="form3Example3"
                                                        name="names"
                                                        class="form-control"
                                                        value={this.state.names}
                                                        onChange={this.onChangenames}
                                                    />
                                                </div>

                                                <div class="form-outline mb-4">
                                                    <label class="form-label" for="form3Example3">
                                                        Name
                                                    </label>
                                                    <input
                                                        type="text"
                                                        id="form3Example3"
                                                        class="form-control"
                                                        name="phone"
                                                        value={this.state.phone}
                                                        onChange={this.onChangephone}
                                                    />
                                                </div>

                                              

                                            <button
                                                type="submit"
                                                class="btn btn-primary btn-block mb-4"
                                                value="update user"
                                            >
                                                Update Profile
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </main>
                    </div>
                </div>
            </>
        );
    }
}

export default withRouter(Admin);

請幫助!!!...謝謝

Answer 1

您的后端將接受“/edit/${url}”上的請求。 在您的前端更改。 axios.post('/updateuser/' + blabla) 到 axios.post('edit/updateuser/' + blabla)

Answer 2

在服務器。

 if (!userdata) return next(new Error('Unable To Find Employee With This Id')); else { let variable = userdata; variable.names = req.body.names; variable.phone = req.body.phone; // variable.save().then(emp => { // res.json('Employee Updated Successfully'); //}); User.findByIdAndUpdate(variable._id, variable).then( emp => { res.json('Employee Updated Successfully'); } );

用戶數據是可變的嗎？ 我的意思是 userdata.names 不可重新分配，請先嘗試將 userdata 存儲到變量中，然后檢查是否出錯。