Question

TypeError：无法读取未定义的属性（读取‘params’）Django + React

2023-06-01

106

reactjs django

未捕获 TypeError：无法读取未定义的属性（读取“params”）无法导航到 id，有人能帮忙吗？我正在使用 django 作为后端，使用 react 作为前端

class ArticleDetail extends  React.Component{

    state={
        article:{}
    }
    componentDidMount(){
        const id = this.props.match.params.id;
      
      axios.get(`http://127.0.0.1:8000/api/${id}`)
      .then(res =>{
        this.setState({
            article:res.data
        });
        console.log(res.data)
       
      })

    }
    render(){
        return(
           
            <Card title={this.state.article.title} >
                <p>{this.state.article.content }</p>
            </Card>
        )
    }
}```


TypeError: Cannot read properties of undefined (reading 'params') Unabel to navigate to id can anyone help?
i am working on react + django. My data from server in list is showing but when i try to navigate to particular data id it shows error

Answer 1

这应该是前端问题。

1-) 在类的开头添加以下代码行：

import { useParams } from 'react-router-dom';

2-) 然后在类上方添加此函数（完全复制）：

export function withRouter(Children){
 return(props)=>{

    const match  = {params: useParams()};
    return <Children {...props}  match = {match}/>
  }
 }

3-) 接下来，将类定义更改为：

class ArticleDetail extends Component

4-) 在类的末尾添加以下代码行：

export default withRouter(ArticleDetail);

参考： https://stackoverflow.com/a/75304487/11897778

如果它不起作用，请提供有关错误的更多详细信息，如果正在发出 API 请求，或者它在发出 API 请求之前失败？

Answer 2

这对我有用感谢 Jesus Fung 的帮助

import React from "react";

import axios from 'axios';
import {Card}  from "antd";
import { useParams } from "react-router-dom";


export function withRouter(Children){
    return(props)=>{
   
       const match  = {params: useParams()};
       return <Children {...props}  match = {match}/>
     }
    }

class ArticleDetail extends  React.Component{
      
    state={
        article:{}
    }
    componentDidMount(){
        const id = this.props.match.params.id;
       
        
      
      axios.get(`http://127.0.0.1:8000/api/${id}`)
      .then(res =>{
        this.setState({
            article:res.data
        });
        console.log(res.data)
       
      })

    }
    render(){
        return(
           
            <Card title={this.state.article.title} >
                <p>{this.state.article.content }</p>
            </Card>
        )
    }
}
export default withRouter(ArticleDetail);

Answer 3

import products from "../products"; import { useParams } from "react-router-dom";

function ProductScreen() { const match = { params: useParams() };
const product = products.find((p) => p._id === match.params.id);
return {product.name}; }