如何修复Reactjs中的'无法读取未定义的属性'params'的错误'

Question

我想知道我每次遇到MSG“无法读取未定义的属性'params'的代码时，我的代码出了什么问题。我想将道具从页面传递到另一个，我已经从多个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

Answer 1

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

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

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

使用更适合您的一种。