加载资源失败：编辑表单 React 节点时服务器响应状态为 404（未找到）MySQL

Question

我在 React 中编辑表单后无法导航到正确的路径。尽管更新时没有错误，但网页会刷新并将我从站点注销。控制台出现此错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的前端代码：

import React, {useContext, useState, useEffect} from 'react'
import { UserContext, UserTypeContext } from '../Helper/Context';
import { Form, Button, Card } from 'react-bootstrap';
import Axios from 'axios';
import { useHistory } from 'react-router-dom';

function LecturerEditProject(){

    const history = useHistory();

    const {userId, setUserId} = useContext(UserContext);
    const {type, isUserType} = useContext(UserTypeContext);

    const [projectCode, setProjectCode] = useState("");
    const [projectTitle, setProjectTitle] = useState("");
    const [projectInformation, setProjectInformation] = useState("");
    const [collaboratorId, setCollaboratorId] = useState("");

const updateProject = () => {

        Axios.put(`http://localhost:3001/lecteditproject/${projectCode}`,{
                projectId: projectCode,
                projectTitle: projectTitle,
                projectInformation: projectInformation,
                collaboratorId: collaboratorId,
        }).then((response) => {
                if(response){
                    window.alert('Your project has been updated!');
                    history.push(`/lecturer/${userId}/yourproject`);
                }
                else{
                    window.alert('Update is unsuccessful!');
                }
            })
    }

return(
        <div className="d-flex justify-content-center">
            <Card style={{ width: '70%' }}>
            <Form onSubmit = {updateProject} className = "m-3 p-5">
            <h3>Edit Project</h3>
            <hr/>
            
            <Form.Group className="mb-3" controlId="projectTitle">
            <Form.Label>Project Title</Form.Label>
              <Form.Control type="text" placeholder="Enter your project title here"  
                  onChange = {(event) => {
                    setProjectTitle(event.target.value);
                  }}
                  defaultValue = {projectTitle}
                />
            </Form.Group>
            
            <Form.Group className="mb-3" controlId="projectInformation">
            <Form.Label>Project Information</Form.Label>
                <Form.Control as="textarea" rows={3} placeholder="Enter your project information here"  
                  onChange = {(event) => {
                    setProjectInformation(event.target.value);
                  }}
                    defaultValue = {projectInformation}
                />
            </Form.Group>

            <Form.Group className="mb-3" controlId="projectCollaborator">
                    <Form.Label>Collaborator</Form.Label>
                    <Form.Control type="text" placeholder="Enter your project collaborator ID here"  
                        onChange = {(event) => {
                            setCollaboratorId(event.target.value);
                        }}

                    />
            </Form.Group>
            


            <div className = "d-flex flex-end  justify-content-end align-items-end mt-3">
            <Button className = "d-flex flex-end justify-content-end align-items-end" variant="primary" type="submit">
                Update
            </Button>
          </div>

          </Form>
          </Card>
        </div>
)

我的Node.js Axios put请求如下：

app.put("/lecteditproject/:projectid", (req,res) => {

    // upload.single('userImage')
        const projectId = req.body.projectId;
        const projectTitle = req.body.projectTitle;
        const projectInformation = req.body.projectInformation;
        const collaboratorId = req.body.collaboratorId;


        try{
            const updateProject = "UPDATE project SET project_title = ?, project_information = ?, representative_id = ? WHERE project_id = ?;"

            db.query(updateProject, [projectTitle, projectInformation, collaboratorId, projectId], (err, result) => {


                if(err){
                    console.log("Error: ", err);
                }
                else{
                    res.send(result);
                }
                
            })

        }
        catch(err){
            console.log(err);
        }

    
}
)

谁能帮我解决这个问题？我已经在这部分停留了好几天了。更新成功，但它注销了我。谢谢。

Answer 1

为什么页面重新加载是表单标记的默认行为你必须通过在 updateProject 函数中执行此 event.preventDefault(); 来防止该默认行为这将解决你的刷新问题现在看到你得到来自 API 的回复仍然没有然后我建议尝试与邮递员确认您是否收到回复

  const updateProject = async (event) => {
    event.preventDefault();
    try {
      const res = await Axios.put(
        `http://localhost:3001/lecteditproject/${projectCode}`,
        {
          projectId: projectCode,
          projectTitle: projectTitle,
          projectInformation: projectInformation,
          collaboratorId: collaboratorId,
        }
      );
      window.alert("Your project has been updated!");
      history.push(`/lecturer/${userId}/yourproject`);
    } catch (error) {
      console.log(error);
      window.alert("Update is unsuccessful!");
    }
  };

加载资源失败：编辑表单 React 节点时服务器响应状态为 404（未找到）MySQL

Failed to load resource: the server responded with a status of 404 (Not Found) when editing form React Node MySQL

javascript

mysql

node.js

reactjs

axios