如何修复Reactjs中的“无法读取未定义的属性”参数”错误

每当我收到此味精“我无法读取未定义的属性'params'”时,我想知道代码有什么问题,我想将道具从页面传递到另一个,我已经获取了多个API,并从第二个获取了API API,我想获取一些图像以将其传递给其他视图。第一个API在ProfileHeader.JS上运行良好,而第二个API与Profiletabs.JS Iam则面临一些问题。

我不确定我的问题在哪里-“对不起我的英语不好”

我的第一个视图:

ProfileLanding.JS

import React,{ useState,useEffect } from 'react'
import ProfileHeader from './ProfileHeader';
import Profiletabs from './Profiletabs';

function ProfileLanding({ match }) {
    useEffect(() => {
        fetchUser();
        console.log(match);
    },[]);
    const [user,setUser] = useState({
        image: {}
    });
    const [usergallery,setUsergallery] = useState({
        image: {}
    });
    const fetchUser = async () => {
        let [fetchUser,fetchUsergallery] = await Promise.all([
            fetch(
                `http://arabcdb.com/backstage/login/teamapibyid/${match.params.id}`
            ),fetch(
                `https://arabcdb.com/backstage/login/mediateamapiid/${match.params.id}`
            )
        ]);
        const userr = await fetchUser.json();
        setUser(userr);
        const usergalleryr = await fetchUsergallery.json();
        setUsergallery(usergalleryr);
    };
    return(
               <section classname="col-md-9">
                   <ProfileHeader user={user} />
                   <Profiletabs usergallery={usergallery} />
               </section>
    )
}
export default ProfileLanding;

这是我的第二个观点:

Profiletabs.JS

import React,{ Component } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,Switch,Route,Link,useParams
} from "react-router-dom";
import './Profiletabs.css'
class Profiletabs extends Component{
    constructor(props) {
        super();
        this.state = { data: [] };
        console.log(props)
      }
      componentDidmount() {
         const test = this.props.match.params.id;
        fetch(`http://arabcdb.com/backstage/login/mediateamapiid/${test}`)
          .then(res => res.json())
          .then(json => this.setState({ data: json }));
      }
      render() {
        return (
                    <div>
                        <div classname="gallery" id="gallery">
                       {
                           this.state.data.map(item => (
                            <div classname="mb-3 pics animation all 2" key={item.id}><img classname="img-fluid" src={"http://arabcdb.com/backstage/uploads/" + item.image} alt="Card cap" /></div>
                           ))
                       }
            </div>
        </div>
    );
  }
}
export default Profiletabs;

View Error MSG

xtren2008 回答:如何修复Reactjs中的“无法读取未定义的属性”参数”错误

那是因为您实际上没有比赛道具。

由于您正在使用类组件,因此在ProfileTabs.js文件中,应将其包装在withRouter HOC中。或者,如果您更喜欢使用功能组件,则可以使用useparams挂钩。

您还可以从ProfileLanding.js组件中传递道具。

使用对您更轻松的一种。

本文链接:https://www.f2er.com/3169827.html

大家都在问