\"Get 500 (Internal Server Error)\" on Django+React答案

【问题标题】："Get 500 (Internal Server Error)" on Django+React\"Get 500 (Internal Server Error)\" on Django+React
【发布时间】：2022-12-08 05:03:58
【问题描述】：

我正在研究 Django+React 项目。我在 Django 中制作了用户和项目模型。我可以访问项目列表页面，但我无法尝试访问项目页面。另一件事是，当我在页面上使用带有项目列表的链接时，它会发送到 http://localhost:3000/projects/undefined。

项目列表页面： http://localhost:3000/项目/

项目页面： http://localhost:3000/projects/摩天大楼

安慰：

GET http://localhost:8000/api/projects/undefined/ 500 (Internal Server Error)

终端：

base.models.Project.DoesNotExist: Project matching query does not exist.
[07/Dec/2022 20:47:10] "GET /api/projects/undefined/ HTTP/1.1" 500 101255

项目.js

import { React, useState, useEffect } from 'react';
import axios from 'axios';
import {  Row, Col, Image, ListGroup } from 'react-bootstrap'
import './index.css'
import './bootstrap.min.css'
    

function Project() {
    // projects is the data, setprojects is a function that sets the value of projects
    const [project, setProject] = useState([]);
    
    useEffect(() => {

      const fetchproject = async({slug}) => { 
        try {
          const res = await axios.get(`http://localhost:8000/api/projects/${slug}`);
          setProject(res.data);
        } catch (err) {}
     };
     const slugData = window.location.href.split("/");
     
      fetchproject(slugData[slugData.length-1]);// add your slug value in this method as an argument
    }, []);
    
return (
    <div>
        <Row className="my-1 p-4">
            <Col xs={3} sm={2} md={2} lg={1} >
                <Image  className="p-1 rounded-circle bg-dark mx-auto d-block" style={{width: 100, height: 100}} src={project.image} fluid />

                <ListGroup variant="flush" >
                    <ListGroup.Item>
                        <h3 class="rfs-10">{project.name}</h3>
                    </ListGroup.Item>

                    <ListGroup.Item style={{fontSize: 12}}>
                        <p>{project.description}</p>
                    </ListGroup.Item>

                </ListGroup>
            </Col>
        </Row>
    </div>

)
}
export default Project;

应用程序.js

import React from "react";
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Header from './components/header'
import Footer from './components/footer'


import Users from './pages/users'
import Projects from './pages/projects'
import User from './pages/user'
import Project from './pages/project'

function App() {
  return (
  <>
        <Header/>

             <BrowserRouter>
              <Routes>
                <Route path='users/' element={<Users />} />
                <Route path='projects/' element={<Projects />} />
                <Route path="/projects/:id" element={<Project />} />
                <Route path="/users/:id" element={<User />} />
              </Routes>
             </BrowserRouter>

        <Footer/>
  </>
  );
}

export default App;

网址.py

from django.urls import path
from .views import getRoutes, UserListView, ProjectListView, projectview

urlpatterns = [
    path('', getRoutes, name='routes'),
    path('users/', UserListView.as_view(), name='routes'),
    path('projects/', ProjectListView.as_view(), name='routes'),
    path('projects/<slug:slug>/', projectview, name='routes'),

祝大家拥有美好的一天！

【问题讨论】：

标签： reactjs django axios

【解决方案1】：

您似乎正在尝试访问一个不存在的实例。访问资源时尝试实现此方法： https://docs.djangoproject.com/en/4.1/topics/http/shortcuts/#get-object-or-404

【讨论】：