1

单击按钮时，系统会引发以下错误，而不是导航到 ProductDetail 组件：

未捕获的类型错误：无法读取未定义的属性（读取“路径名”）

url 中的产品 id 被正确识别，如果我手动输入 url，我会得到相应的 REST API 视图，但尝试通过按钮导航到那里是行不通的。

关于我做错了什么的任何想法？

这是我使用的：

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",

应用程序.js

import React, { Component } from "react";
import { render } from "react-dom";
import Home from "./Home";
import Header from "./Header";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import ShowProducts3 from './ShowProducts3';
import ProductDetail from './ProductDetail';

function App() {
    return (
    
      <div className="min-h-screen bg-red-700 text-gray-900">  
        
        <div>
          <Router >
          <Header /> 
            <Routes>
              <Route exact path="/" element={<ShowProducts3 />} />
              <Route exact path="/api/pp/:id" element={<ProductDetail />} />
            </Routes>
          </Router>
        </div>
      </div>
      
    );
    }

export default App;

ShowProducts3.js

import axios from 'axios';
import React, {useState, useEffect} from 'react';
import Card from '@mui/material/Card';
import {  CardActionArea } from '@mui/material';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';

import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';

const API_URL = "http://localhost:8000/api/pp/"

const ShowProducts3 = () => {

    const [products, setProducts] = useState([])

    const fetchProducts = async () => {
        const result = await axios.get(API_URL);
        console.log(result.data)
        setProducts(result.data)
    }

    useEffect(() => {
        fetchProducts();
    },[])

    const goToDetail = () => {
        alert("detail page")
    }

    return (
        <div>
          <div className="main-products-show">
          <Container>
            <Grid container spacing={{ xs: 2, md: 3 }} >
              
            {
              products.map((product) => (
                <Grid item xs={2} sm={4} md={4} key={product.pk}> 
                <Card  key={product.pk} sx={{ minWidth: 155 }}>   
                <CardActionArea>       
                  <CardContent>
                    <Typography sx={{ mb: 1.5 }} color="text.secondary">
                      {product.name} 
                    </Typography>
                    <Typography sx={{ mb: 1.5 }} color="text.secondary">
                      {product.description}
                    </Typography>
                    </CardContent>
                    </CardActionArea>
                    <CardActions>
                      <Button className="btn btn-secondary mr-2" component={Link} to={`/api/pp/${product.pk}`} size="small">Details</Button>
                    </CardActions>
                    </Card>
                    </Grid>

                ))
            } 
                
              </Grid>
            </Container>
          </div>
        </div>
    );
};

export default ShowProducts3;

在此处输入图像描述

编辑

该错误似乎与组件“ProductDetail”中的“删除”按钮有关。如果我删除此行，错误就会消失。

删除产品（product.pk）}>删除

知道有什么问题吗？


    import axios from 'axios';
    import React, {useState, useEffect} from 'react';
    import { useParams, useNavigate } from 'react-router';
    import { Link } from 'react-router-dom';

    const ProductDetail = () => {

    const [product, setProduct] = useState([])

    const {id} = useParams();
    const history = useNavigate();

    useEffect(() => {
        getSingleProduct();
        return () => {
          setProduct({}); 
        };
    },[])

    const API_URL = "http://localhost:8000/api/pp/"

    const getSingleProduct = async () => {
      const  { data } = await axios.put(`http://localhost:8000/api/pp/${id}/`)
      console.log(data);
      setProduct(data);
      

    }

    const deleteProduct = async (id) => {
        await axios.delete(`http://localhost:8000/api/pp/${id}/`)
        history.push("/")
    }

        return (
            <div>
                <h2>Detail of Single Product </h2>
                <hr></hr>
                <div className="full-product-detail">
                    <div className="product-detail">
                        <p>{product.pk}</p>
                        <p>{product.name}</p>
                        <p>{product.description}</p>
                    </div> 
                </div>

                <Link className="btn btn-outline-primary mr-2" to={`/${product.pk}/update`}>Update</Link>           
                <Link className="btn btn-danger" onClick={() => deleteProduct(product.pk)}>Delete</Link>
            </div>
        );
    };

    export default ProductDetail;
4

1 回答 1

0

也许与您的链接和按钮组件相关的问题尝试使用此：

import { Link } from '@mui/material/Link';

<Button component={Link} variant="contained" href={`/api/pp/${product.pk}`}>
   Link
</Button>
于 2021-12-19T10:49:05.543 回答