每当我收到此味精“我无法读取未定义的属性'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;